eat-js-sdk 0.0.7 → 0.0.9

package/dist/eat-prompt-builder.mjs

@@ -44,6 +44,50 @@
     subscribe(store, (_) => value = _)();
     return value;
   }
+  function create_slot(definition, ctx, $$scope, fn) {
+    if (definition) {
+      const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+      return definition[0](slot_ctx);
+    }
+  }
+  function get_slot_context(definition, ctx, $$scope, fn) {
+    return definition[1] && fn ? assign($$scope.ctx.slice(), definition[1](fn(ctx))) : $$scope.ctx;
+  }
+  function get_slot_changes(definition, $$scope, dirty, fn) {
+    if (definition[2] && fn) {
+      const lets = definition[2](fn(dirty));
+      if ($$scope.dirty === void 0) {
+        return lets;
+      }
+      if (typeof lets === "object") {
+        const merged = [];
+        const len = Math.max($$scope.dirty.length, lets.length);
+        for (let i = 0; i < len; i += 1) {
+          merged[i] = $$scope.dirty[i] | lets[i];
+        }
+        return merged;
+      }
+      return $$scope.dirty | lets;
+    }
+    return $$scope.dirty;
+  }
+  function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+    if (slot_changes) {
+      const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+      slot.p(slot_context, slot_changes);
+    }
+  }
+  function get_all_dirty_from_scope($$scope) {
+    if ($$scope.ctx.length > 32) {
+      const dirty = [];
+      const length = $$scope.ctx.length / 32;
+      for (let i = 0; i < length; i++) {
+        dirty[i] = -1;
+      }
+      return dirty;
+    }
+    return -1;
+  }
   function exclude_internal_props(props) {
     const result = {};
     for (const k in props)
@@ -51,6 +95,9 @@
         result[k] = props[k];
     return result;
   }
+  function action_destroyer(action_result) {
+    return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
+  }
 
   // node_modules/svelte/src/runtime/internal/globals.js
   var globals = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : (
@@ -187,6 +234,16 @@
   function children(element2) {
     return Array.from(element2.childNodes);
   }
+  function set_data(text2, data) {
+    data = "" + data;
+    if (text2.data === data)
+      return;
+    text2.data = /** @type {string} */
+    data;
+  }
+  function set_input_value(input, value) {
+    input.value = value == null ? "" : value;
+  }
   function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
     return new CustomEvent(type, { detail, bubbles, cancelable });
   }
@@ -345,10 +402,10 @@
           set_current_component(component);
           update(component.$$);
         }
-      } catch (e) {
+      } catch (e2) {
         dirty_components.length = 0;
         flushidx = 0;
-        throw e;
+        throw e2;
       }
       set_current_component(null);
       dirty_components.length = 0;
@@ -505,7 +562,7 @@
     }
     component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
   }
-  function init(component, options, instance3, create_fragment4, not_equal, props, append_styles2 = null, dirty = [-1]) {
+  function init(component, options, instance7, create_fragment11, not_equal, props, append_styles2 = null, dirty = [-1]) {
     const parent_component = current_component;
     set_current_component(component);
     const $$ = component.$$ = {
@@ -531,7 +588,7 @@
     };
     append_styles2 && append_styles2($$.root);
     let ready = false;
-    $$.ctx = instance3 ? instance3(component, options.props || {}, (i, ret, ...rest) => {
+    $$.ctx = instance7 ? instance7(component, options.props || {}, (i, ret, ...rest) => {
       const value = rest.length ? rest[0] : ret;
       if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
         if (!$$.skip_bound && $$.bound[i])
@@ -544,7 +601,7 @@
     $$.update();
     ready = true;
     run_all($$.before_update);
-    $$.fragment = create_fragment4 ? create_fragment4($$.ctx) : false;
+    $$.fragment = create_fragment11 ? create_fragment11($$.ctx) : false;
     if (options.target) {
       if (options.hydrate) {
         start_hydrating();
@@ -613,7 +670,7 @@
       async connectedCallback() {
         this.$$cn = true;
         if (!this.$$c) {
-          let create_slot = function(name) {
+          let create_slot2 = function(name) {
             return () => {
               let node;
               const obj = {
@@ -647,7 +704,7 @@
           const existing_slots = get_custom_elements_slots(this);
           for (const name of this.$$s) {
             if (name in existing_slots) {
-              $$slots[name] = [create_slot(name)];
+              $$slots[name] = [create_slot2(name)];
             }
           }
           for (const attribute of this.attributes) {
@@ -947,6 +1004,246 @@
     return await response.json();
   };
 
+  // src/lib/components/prompt/template/PromptBody.svelte
+  function create_if_block_1(ctx) {
+    let html_tag;
+    let raw_value = `<${/*promptRubricHeaderElem*/
+    ctx[2]} class="item-heading mb-2 md:mb-4">${/*rubric*/
+    ctx[0]}</${/*promptRubricHeaderElem*/
+    ctx[2]}>`;
+    let html_anchor;
+    return {
+      c() {
+        html_tag = new HtmlTag(false);
+        html_anchor = empty();
+        html_tag.a = html_anchor;
+      },
+      m(target, anchor) {
+        html_tag.m(raw_value, target, anchor);
+        insert(target, html_anchor, anchor);
+      },
+      p(ctx2, dirty) {
+        if (dirty & /*rubric*/
+        1 && raw_value !== (raw_value = `<${/*promptRubricHeaderElem*/
+        ctx2[2]} class="item-heading mb-2 md:mb-4">${/*rubric*/
+        ctx2[0]}</${/*promptRubricHeaderElem*/
+        ctx2[2]}>`))
+          html_tag.p(raw_value);
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(html_anchor);
+          html_tag.d();
+        }
+      }
+    };
+  }
+  function create_if_block(ctx) {
+    let html_tag;
+    let raw_value = `<${/*promptRubricHeaderElem*/
+    ctx[2]} class="item-heading font-semibold">${/*prompt*/
+    ctx[1]}</${/*promptRubricHeaderElem*/
+    ctx[2]}>`;
+    let html_anchor;
+    return {
+      c() {
+        html_tag = new HtmlTag(false);
+        html_anchor = empty();
+        html_tag.a = html_anchor;
+      },
+      m(target, anchor) {
+        html_tag.m(raw_value, target, anchor);
+        insert(target, html_anchor, anchor);
+      },
+      p(ctx2, dirty) {
+        if (dirty & /*prompt*/
+        2 && raw_value !== (raw_value = `<${/*promptRubricHeaderElem*/
+        ctx2[2]} class="item-heading font-semibold">${/*prompt*/
+        ctx2[1]}</${/*promptRubricHeaderElem*/
+        ctx2[2]}>`))
+          html_tag.p(raw_value);
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(html_anchor);
+          html_tag.d();
+        }
+      }
+    };
+  }
+  function create_fragment(ctx) {
+    let div1;
+    let t0;
+    let t1;
+    let div0;
+    let t2;
+    let current;
+    let if_block0 = (
+      /*rubric*/
+      ctx[0] && create_if_block_1(ctx)
+    );
+    let if_block1 = (
+      /*prompt*/
+      ctx[1] && create_if_block(ctx)
+    );
+    const default_slot_template = (
+      /*#slots*/
+      ctx[4].default
+    );
+    const default_slot = create_slot(
+      default_slot_template,
+      ctx,
+      /*$$scope*/
+      ctx[3],
+      null
+    );
+    return {
+      c() {
+        div1 = element("div");
+        if (if_block0)
+          if_block0.c();
+        t0 = space();
+        if (if_block1)
+          if_block1.c();
+        t1 = space();
+        div0 = element("div");
+        t2 = space();
+        if (default_slot)
+          default_slot.c();
+        attr(div0, "class", "divider my-6");
+        attr(div1, "class", "bg-transparent");
+      },
+      m(target, anchor) {
+        insert(target, div1, anchor);
+        if (if_block0)
+          if_block0.m(div1, null);
+        append(div1, t0);
+        if (if_block1)
+          if_block1.m(div1, null);
+        append(div1, t1);
+        append(div1, div0);
+        append(div1, t2);
+        if (default_slot) {
+          default_slot.m(div1, null);
+        }
+        current = true;
+      },
+      p(ctx2, [dirty]) {
+        if (
+          /*rubric*/
+          ctx2[0]
+        ) {
+          if (if_block0) {
+            if_block0.p(ctx2, dirty);
+          } else {
+            if_block0 = create_if_block_1(ctx2);
+            if_block0.c();
+            if_block0.m(div1, t0);
+          }
+        } else if (if_block0) {
+          if_block0.d(1);
+          if_block0 = null;
+        }
+        if (
+          /*prompt*/
+          ctx2[1]
+        ) {
+          if (if_block1) {
+            if_block1.p(ctx2, dirty);
+          } else {
+            if_block1 = create_if_block(ctx2);
+            if_block1.c();
+            if_block1.m(div1, t1);
+          }
+        } else if (if_block1) {
+          if_block1.d(1);
+          if_block1 = null;
+        }
+        if (default_slot) {
+          if (default_slot.p && (!current || dirty & /*$$scope*/
+          8)) {
+            update_slot_base(
+              default_slot,
+              default_slot_template,
+              ctx2,
+              /*$$scope*/
+              ctx2[3],
+              !current ? get_all_dirty_from_scope(
+                /*$$scope*/
+                ctx2[3]
+              ) : get_slot_changes(
+                default_slot_template,
+                /*$$scope*/
+                ctx2[3],
+                dirty,
+                null
+              ),
+              null
+            );
+          }
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(default_slot, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(default_slot, local);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(div1);
+        }
+        if (if_block0)
+          if_block0.d();
+        if (if_block1)
+          if_block1.d();
+        if (default_slot)
+          default_slot.d(detaching);
+      }
+    };
+  }
+  function instance($$self, $$props, $$invalidate) {
+    let { $$slots: slots = {}, $$scope } = $$props;
+    let { rubric } = $$props;
+    let { prompt } = $$props;
+    const promptRubricHeaderElem = get_store_value(promptRubricElem);
+    $$self.$$set = ($$props2) => {
+      if ("rubric" in $$props2)
+        $$invalidate(0, rubric = $$props2.rubric);
+      if ("prompt" in $$props2)
+        $$invalidate(1, prompt = $$props2.prompt);
+      if ("$$scope" in $$props2)
+        $$invalidate(3, $$scope = $$props2.$$scope);
+    };
+    return [rubric, prompt, promptRubricHeaderElem, $$scope, slots];
+  }
+  var PromptBody = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance, create_fragment, safe_not_equal, { rubric: 0, prompt: 1 });
+    }
+    get rubric() {
+      return this.$$.ctx[0];
+    }
+    set rubric(rubric) {
+      this.$$set({ rubric });
+      flush();
+    }
+    get prompt() {
+      return this.$$.ctx[1];
+    }
+    set prompt(prompt) {
+      this.$$set({ prompt });
+      flush();
+    }
+  };
+  customElements.define("prompt-body", create_custom_element(PromptBody, { "rubric": {}, "prompt": {} }, ["default"], [], true));
+  var PromptBody_default = PromptBody;
+
   // src/lib/composables/useMCQ.ts
   var useAlphabetEquivalent = (index) => {
     const alphabetArr = [
@@ -984,42 +1281,16 @@
   // src/lib/components/prompt/mcq/PromptMCQ.svelte
   function get_each_context(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[12] = list[i][0];
-    child_ctx[13] = list[i][1];
-    child_ctx[15] = i;
+    child_ctx[11] = list[i][0];
+    child_ctx[12] = list[i][1];
+    child_ctx[14] = i;
     return child_ctx;
   }
-  function create_if_block_1(ctx) {
-    let html_tag;
-    let raw_value = `<${/*promptRubricHeaderElem*/
-    ctx[5]} class="item-heading mb-2 md:mb-4">${/*rubric*/
-    ctx[2].text}</${/*promptRubricHeaderElem*/
-    ctx[5]}>`;
-    let html_anchor;
-    return {
-      c() {
-        html_tag = new HtmlTag(false);
-        html_anchor = empty();
-        html_tag.a = html_anchor;
-      },
-      m(target, anchor) {
-        html_tag.m(raw_value, target, anchor);
-        insert(target, html_anchor, anchor);
-      },
-      p: noop,
-      d(detaching) {
-        if (detaching) {
-          detach(html_anchor);
-          html_tag.d();
-        }
-      }
-    };
-  }
-  function create_if_block(ctx) {
+  function create_if_block2(ctx) {
     let div1;
     let div0;
     let div0_class_value;
-    let t;
+    let t2;
     let each_value = ensure_array_like(Object.entries(
       /*options*/
       ctx[4]
@@ -1032,7 +1303,7 @@
       c() {
         div1 = element("div");
         div0 = element("div");
-        t = space();
+        t2 = space();
         for (let i = 0; i < each_blocks.length; i += 1) {
           each_blocks[i].c();
         }
@@ -1043,7 +1314,7 @@
       m(target, anchor) {
         insert(target, div1, anchor);
         append(div1, div0);
-        append(div1, t);
+        append(div1, t2);
         for (let i = 0; i < each_blocks.length; i += 1) {
           if (each_blocks[i]) {
             each_blocks[i].m(div1, null);
@@ -1057,7 +1328,7 @@
           attr(div0, "class", div0_class_value);
         }
         if (dirty & /*selectedOption, Object, options, handleOptionClick*/
-        82) {
+        50) {
           each_value = ensure_array_like(Object.entries(
             /*options*/
             ctx2[4]
@@ -1093,7 +1364,7 @@
     let t1;
     let t2_value = (
       /*option*/
-      ctx[13].answer + ""
+      ctx[12].answer + ""
     );
     let t2;
     let t3;
@@ -1104,9 +1375,9 @@
     function click_handler() {
       return (
         /*click_handler*/
-        ctx[8](
+        ctx[7](
           /*option*/
-          ctx[13]
+          ctx[12]
         )
       );
     }
@@ -1116,7 +1387,7 @@
         span = element("span");
         span.textContent = `${useMCQ_default(
           /*index*/
-          ctx[15]
+          ctx[14]
         )}`;
         t1 = space();
         t2 = text(t2_value);
@@ -1124,14 +1395,14 @@
         attr(span, "class", "choice group-active:border-2 group-active:border-blue-1000 group-active:p-[7px]");
         attr(button, "aria-label", button_aria_label_value = `${/*selectedOption*/
         ctx[1] === /*option*/
-        ctx[13].id ? "Selected option" : "Option"} ${useMCQ_default(
+        ctx[12].id ? "Selected option" : "Option"} ${useMCQ_default(
           /*index*/
-          ctx[15]
+          ctx[14]
         )}: ${/*option*/
-        ctx[13].answer}`);
+        ctx[12].answer}`);
         attr(button, "class", button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
         (ctx[1] === /*option*/
-        ctx[13].id ? "selected" : ""));
+        ctx[12].id ? "selected" : ""));
       },
       m(target, anchor) {
         insert(target, button, anchor);
@@ -1149,17 +1420,17 @@
         if (dirty & /*selectedOption*/
         2 && button_aria_label_value !== (button_aria_label_value = `${/*selectedOption*/
         ctx[1] === /*option*/
-        ctx[13].id ? "Selected option" : "Option"} ${useMCQ_default(
+        ctx[12].id ? "Selected option" : "Option"} ${useMCQ_default(
           /*index*/
-          ctx[15]
+          ctx[14]
         )}: ${/*option*/
-        ctx[13].answer}`)) {
+        ctx[12].answer}`)) {
           attr(button, "aria-label", button_aria_label_value);
         }
         if (dirty & /*selectedOption*/
         2 && button_class_value !== (button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
         (ctx[1] === /*option*/
-        ctx[13].id ? "selected" : ""))) {
+        ctx[12].id ? "selected" : ""))) {
           attr(button, "class", button_class_value);
         }
       },
@@ -1172,127 +1443,1185 @@
       }
     };
   }
-  function create_fragment(ctx) {
-    let div1;
-    let t0;
-    let html_tag;
-    let raw_value = `<${/*promptRubricHeaderElem*/
-    ctx[5]} class="item-heading font-semibold">${/*prompt*/
-    ctx[3]}</${/*promptRubricHeaderElem*/
-    ctx[5]}>`;
-    let t1;
-    let div0;
-    let t2;
-    let if_block0 = (
-      /*rubric*/
-      ctx[2].text && create_if_block_1(ctx)
-    );
-    let if_block1 = (
+  function create_default_slot(ctx) {
+    let if_block_anchor;
+    let if_block = (
       /*options*/
-      ctx[4] && create_if_block(ctx)
+      ctx[4] && create_if_block2(ctx)
     );
     return {
       c() {
-        div1 = element("div");
-        if (if_block0)
-          if_block0.c();
-        t0 = space();
-        html_tag = new HtmlTag(false);
-        t1 = space();
-        div0 = element("div");
-        t2 = space();
-        if (if_block1)
-          if_block1.c();
-        html_tag.a = t1;
-        attr(div0, "class", "divider my-6");
-        attr(div1, "class", "bg-transparent");
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
       },
       m(target, anchor) {
-        insert(target, div1, anchor);
-        if (if_block0)
-          if_block0.m(div1, null);
-        append(div1, t0);
-        html_tag.m(raw_value, div1);
-        append(div1, t1);
-        append(div1, div0);
-        append(div1, t2);
-        if (if_block1)
-          if_block1.m(div1, null);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
       },
-      p(ctx2, [dirty]) {
-        if (
-          /*rubric*/
-          ctx2[2].text
-        )
-          if_block0.p(ctx2, dirty);
+      p(ctx2, dirty) {
         if (
           /*options*/
           ctx2[4]
         )
-          if_block1.p(ctx2, dirty);
+          if_block.p(ctx2, dirty);
       },
-      i: noop,
-      o: noop,
       d(detaching) {
         if (detaching) {
-          detach(div1);
+          detach(if_block_anchor);
         }
-        if (if_block0)
-          if_block0.d();
-        if (if_block1)
-          if_block1.d();
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
-  function instance($$self, $$props, $$invalidate) {
-    let { sessionData } = $$props;
-    let { isDataSaving } = $$props;
-    const { rubric, interaction, metadata } = sessionData;
-    const { prompt, options } = interaction;
-    let selectedOption;
-    const dispatch = createEventDispatcher();
-    const promptRubricHeaderElem = get_store_value(promptRubricElem);
-    if (metadata) {
-      const { events } = metadata.interactions;
-      const currentOption = events.pop();
-      const { answer_id: answerChoiceId } = currentOption;
-      selectedOption = answerChoiceId;
-    }
-    const handleOptionClick = (optionId, option) => {
-      if (isDataSaving || optionId === selectedOption)
-        return;
-      $$invalidate(1, selectedOption = optionId);
-      dispatch("saveOption", {
-        answerChoiceId: optionId,
-        answerChoice: option
-      });
-    };
-    const click_handler = (option) => handleOptionClick(option.id, option.answer);
-    $$self.$$set = ($$props2) => {
-      if ("sessionData" in $$props2)
-        $$invalidate(7, sessionData = $$props2.sessionData);
-      if ("isDataSaving" in $$props2)
+  function create_fragment2(ctx) {
+    let promptbody;
+    let current;
+    promptbody = new PromptBody_default({
+      props: {
+        rubric: (
+          /*rubric*/
+          ctx[2].text
+        ),
+        prompt: (
+          /*prompt*/
+          ctx[3]
+        ),
+        $$slots: { default: [create_default_slot] },
+        $$scope: { ctx }
+      }
+    });
+    return {
+      c() {
+        create_component(promptbody.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(promptbody, target, anchor);
+        current = true;
+      },
+      p(ctx2, [dirty]) {
+        const promptbody_changes = {};
+        if (dirty & /*$$scope, selectedOption, isDataSaving*/
+        32771) {
+          promptbody_changes.$$scope = { dirty, ctx: ctx2 };
+        }
+        promptbody.$set(promptbody_changes);
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(promptbody.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptbody.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(promptbody, detaching);
+      }
+    };
+  }
+  function instance2($$self, $$props, $$invalidate) {
+    let { sessionData } = $$props;
+    let { isDataSaving } = $$props;
+    const { rubric, interaction, metadata } = sessionData;
+    const { prompt, options } = interaction;
+    let selectedOption;
+    const dispatch = createEventDispatcher();
+    if (metadata) {
+      const { events } = metadata.interactions;
+      const currentOption = events.pop();
+      const { answer_id: answerChoiceId } = currentOption;
+      selectedOption = answerChoiceId[0];
+    }
+    const handleOptionClick = (optionId, option) => {
+      if (isDataSaving || optionId === selectedOption)
+        return;
+      $$invalidate(1, selectedOption = optionId);
+      dispatch("saveOption", {
+        answer_id: [optionId],
+        answer_choice: [option]
+      });
+    };
+    const click_handler = (option) => handleOptionClick(option.id, option.answer);
+    $$self.$$set = ($$props2) => {
+      if ("sessionData" in $$props2)
+        $$invalidate(6, sessionData = $$props2.sessionData);
+      if ("isDataSaving" in $$props2)
+        $$invalidate(0, isDataSaving = $$props2.isDataSaving);
+    };
+    return [
+      isDataSaving,
+      selectedOption,
+      rubric,
+      prompt,
+      options,
+      handleOptionClick,
+      sessionData,
+      click_handler
+    ];
+  }
+  var PromptMCQ = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance2, create_fragment2, safe_not_equal, { sessionData: 6, isDataSaving: 0 });
+    }
+    get sessionData() {
+      return this.$$.ctx[6];
+    }
+    set sessionData(sessionData) {
+      this.$$set({ sessionData });
+      flush();
+    }
+    get isDataSaving() {
+      return this.$$.ctx[0];
+    }
+    set isDataSaving(isDataSaving) {
+      this.$$set({ isDataSaving });
+      flush();
+    }
+  };
+  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {} }, [], [], true));
+  var PromptMCQ_default = PromptMCQ;
+
+  // node_modules/autosize/dist/autosize.esm.js
+  var e = /* @__PURE__ */ new Map();
+  function t(t2) {
+    var o2 = e.get(t2);
+    o2 && o2.destroy();
+  }
+  function o(t2) {
+    var o2 = e.get(t2);
+    o2 && o2.update();
+  }
+  var r = null;
+  "undefined" == typeof window ? ((r = function(e2) {
+    return e2;
+  }).destroy = function(e2) {
+    return e2;
+  }, r.update = function(e2) {
+    return e2;
+  }) : ((r = function(t2, o2) {
+    return t2 && Array.prototype.forEach.call(t2.length ? t2 : [t2], function(t3) {
+      return function(t4) {
+        if (t4 && t4.nodeName && "TEXTAREA" === t4.nodeName && !e.has(t4)) {
+          var o3, r2 = null, n2 = window.getComputedStyle(t4), i = (o3 = t4.value, function() {
+            a({ testForHeightReduction: "" === o3 || !t4.value.startsWith(o3), restoreTextAlign: null }), o3 = t4.value;
+          }), l = function(o4) {
+            t4.removeEventListener("autosize:destroy", l), t4.removeEventListener("autosize:update", s), t4.removeEventListener("input", i), window.removeEventListener("resize", s), Object.keys(o4).forEach(function(e2) {
+              return t4.style[e2] = o4[e2];
+            }), e.delete(t4);
+          }.bind(t4, { height: t4.style.height, resize: t4.style.resize, textAlign: t4.style.textAlign, overflowY: t4.style.overflowY, overflowX: t4.style.overflowX, wordWrap: t4.style.wordWrap });
+          t4.addEventListener("autosize:destroy", l), t4.addEventListener("autosize:update", s), t4.addEventListener("input", i), window.addEventListener("resize", s), t4.style.overflowX = "hidden", t4.style.wordWrap = "break-word", e.set(t4, { destroy: l, update: s }), s();
+        }
+        function a(e2) {
+          var o4, i2, l2 = e2.restoreTextAlign, s2 = void 0 === l2 ? null : l2, d = e2.testForHeightReduction, u = void 0 === d || d, c = n2.overflowY;
+          if (0 !== t4.scrollHeight && ("vertical" === n2.resize ? t4.style.resize = "none" : "both" === n2.resize && (t4.style.resize = "horizontal"), u && (o4 = function(e3) {
+            for (var t5 = []; e3 && e3.parentNode && e3.parentNode instanceof Element; )
+              e3.parentNode.scrollTop && t5.push([e3.parentNode, e3.parentNode.scrollTop]), e3 = e3.parentNode;
+            return function() {
+              return t5.forEach(function(e4) {
+                var t6 = e4[0], o5 = e4[1];
+                t6.style.scrollBehavior = "auto", t6.scrollTop = o5, t6.style.scrollBehavior = null;
+              });
+            };
+          }(t4), t4.style.height = ""), i2 = "content-box" === n2.boxSizing ? t4.scrollHeight - (parseFloat(n2.paddingTop) + parseFloat(n2.paddingBottom)) : t4.scrollHeight + parseFloat(n2.borderTopWidth) + parseFloat(n2.borderBottomWidth), "none" !== n2.maxHeight && i2 > parseFloat(n2.maxHeight) ? ("hidden" === n2.overflowY && (t4.style.overflow = "scroll"), i2 = parseFloat(n2.maxHeight)) : "hidden" !== n2.overflowY && (t4.style.overflow = "hidden"), t4.style.height = i2 + "px", s2 && (t4.style.textAlign = s2), o4 && o4(), r2 !== i2 && (t4.dispatchEvent(new Event("autosize:resized", { bubbles: true })), r2 = i2), c !== n2.overflow && !s2)) {
+            var v = n2.textAlign;
+            "hidden" === n2.overflow && (t4.style.textAlign = "start" === v ? "end" : "start"), a({ restoreTextAlign: v, testForHeightReduction: true });
+          }
+        }
+        function s() {
+          a({ testForHeightReduction: true, restoreTextAlign: null });
+        }
+      }(t3);
+    }), t2;
+  }).destroy = function(e2) {
+    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], t), e2;
+  }, r.update = function(e2) {
+    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], o), e2;
+  });
+  var n = r;
+  var autosize_esm_default = n;
+
+  // node_modules/svelte-autosize/index.js
+  var action = (node) => {
+    autosize_esm_default(node);
+    return {
+      destroy() {
+        autosize_esm_default.destroy(node);
+      }
+    };
+  };
+  action.update = autosize_esm_default.update;
+  action.destroy = autosize_esm_default.destroy;
+  var svelte_autosize_default = action;
+
+  // src/lib/assets/img/messaging/SuccessSolid.svelte
+  function create_fragment3(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM14.7284 6.79289C14.3378 6.40237 13.7047 6.40237 13.3141 6.79289L8.02125 12.0858L6.20711 10.2716C5.81658 9.88112 5.18342 9.88112 4.79289 10.2716C4.40237 10.6622 4.40237 11.2953 4.79289 11.6859L7.31414 14.2071C7.70467 14.5976 8.33783 14.5976 8.72836 14.2071L14.7284 8.20711C15.1189 7.81658 15.1189 7.18342 14.7284 6.79289Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var SuccessSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment3, safe_not_equal, {});
+    }
+  };
+  create_custom_element(SuccessSolid, {}, [], [], true);
+  var SuccessSolid_default = SuccessSolid;
+
+  // src/lib/assets/img/messaging/ErrorSolid.svelte
+  function create_fragment4(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L8.585 10L6.29289 12.2929C5.93241 12.6534 5.90468 13.2206 6.2097 13.6129L6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L10 11.415L12.2929 13.7071C12.6534 14.0676 13.2206 14.0953 13.6129 13.7903L13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L11.415 10L13.7071 7.70711C14.0676 7.34662 14.0953 6.77939 13.7903 6.3871L13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289L10 8.585L7.70711 6.29289Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var ErrorSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment4, safe_not_equal, {});
+    }
+  };
+  create_custom_element(ErrorSolid, {}, [], [], true);
+  var ErrorSolid_default = ErrorSolid;
+
+  // src/lib/assets/img/messaging/InfoSolid.svelte
+  function create_fragment5(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 9C9.44772 9 9 9.44772 9 10V14.5C9 15.0523 9.44772 15.5 10 15.5C10.5523 15.5 11 15.0523 11 14.5V10C11 9.44772 10.5523 9 10 9ZM10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var InfoSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment5, safe_not_equal, {});
+    }
+  };
+  create_custom_element(InfoSolid, {}, [], [], true);
+  var InfoSolid_default = InfoSolid;
+
+  // src/lib/components/prompt/template/PromptResult.svelte
+  function create_else_block_1(ctx) {
+    let errorsolid;
+    let current;
+    errorsolid = new ErrorSolid_default({});
+    return {
+      c() {
+        create_component(errorsolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(errorsolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(errorsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(errorsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(errorsolid, detaching);
+      }
+    };
+  }
+  function create_if_block_2(ctx) {
+    let successsolid;
+    let current;
+    successsolid = new SuccessSolid_default({});
+    return {
+      c() {
+        create_component(successsolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(successsolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(successsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(successsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(successsolid, detaching);
+      }
+    };
+  }
+  function create_if_block3(ctx) {
+    let div0;
+    let span0;
+    let current_block_type_index;
+    let if_block;
+    let span0_class_value;
+    let t0;
+    let span3;
+    let span1;
+    let t1;
+    let t2;
+    let span2;
+    let t3;
+    let div0_class_value;
+    let t4;
+    let div1;
+    let current;
+    const if_block_creators = [create_if_block_12, create_else_block];
+    const if_blocks = [];
+    function select_block_type_1(ctx2, dirty) {
+      if (
+        /*isResultCorrect*/
+        ctx2[2]
+      )
+        return 0;
+      return 1;
+    }
+    current_block_type_index = select_block_type_1(ctx, -1);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    return {
+      c() {
+        div0 = element("div");
+        span0 = element("span");
+        if_block.c();
+        t0 = space();
+        span3 = element("span");
+        span1 = element("span");
+        t1 = text(
+          /*feedbackTitle*/
+          ctx[3]
+        );
+        t2 = space();
+        span2 = element("span");
+        t3 = text(
+          /*resultFeedback*/
+          ctx[1]
+        );
+        t4 = space();
+        div1 = element("div");
+        attr(span0, "class", span0_class_value = `${/*spanIconClass*/
+        ctx[5]} mr-2 p-0.5`);
+        attr(span1, "class", "block mb-1 font-semibold");
+        attr(span3, "class", "text-base");
+        attr(div0, "class", div0_class_value = `${/*mainDivClass*/
+        ctx[4]} flex items-start my-6 p-4 border-l-[6px] text-charcoal`);
+        attr(div1, "class", "divider my-6");
+      },
+      m(target, anchor) {
+        insert(target, div0, anchor);
+        append(div0, span0);
+        if_blocks[current_block_type_index].m(span0, null);
+        append(div0, t0);
+        append(div0, span3);
+        append(span3, span1);
+        append(span1, t1);
+        append(span3, t2);
+        append(span3, span2);
+        append(span2, t3);
+        insert(target, t4, anchor);
+        insert(target, div1, anchor);
+        current = true;
+      },
+      p(ctx2, dirty) {
+        let previous_block_index = current_block_type_index;
+        current_block_type_index = select_block_type_1(ctx2, dirty);
+        if (current_block_type_index !== previous_block_index) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          if_block = if_blocks[current_block_type_index];
+          if (!if_block) {
+            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block.c();
+          } else {
+          }
+          transition_in(if_block, 1);
+          if_block.m(span0, null);
+        }
+        if (!current || dirty & /*spanIconClass*/
+        32 && span0_class_value !== (span0_class_value = `${/*spanIconClass*/
+        ctx2[5]} mr-2 p-0.5`)) {
+          attr(span0, "class", span0_class_value);
+        }
+        if (!current || dirty & /*feedbackTitle*/
+        8)
+          set_data(
+            t1,
+            /*feedbackTitle*/
+            ctx2[3]
+          );
+        if (!current || dirty & /*resultFeedback*/
+        2)
+          set_data(
+            t3,
+            /*resultFeedback*/
+            ctx2[1]
+          );
+        if (!current || dirty & /*mainDivClass*/
+        16 && div0_class_value !== (div0_class_value = `${/*mainDivClass*/
+        ctx2[4]} flex items-start my-6 p-4 border-l-[6px] text-charcoal`)) {
+          attr(div0, "class", div0_class_value);
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(div0);
+          detach(t4);
+          detach(div1);
+        }
+        if_blocks[current_block_type_index].d();
+      }
+    };
+  }
+  function create_else_block(ctx) {
+    let infosolid;
+    let current;
+    infosolid = new InfoSolid_default({});
+    return {
+      c() {
+        create_component(infosolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(infosolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(infosolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(infosolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(infosolid, detaching);
+      }
+    };
+  }
+  function create_if_block_12(ctx) {
+    let successsolid;
+    let current;
+    successsolid = new SuccessSolid_default({});
+    return {
+      c() {
+        create_component(successsolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(successsolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(successsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(successsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(successsolid, detaching);
+      }
+    };
+  }
+  function create_fragment6(ctx) {
+    let div;
+    let span0;
+    let current_block_type_index;
+    let if_block0;
+    let span0_class_value;
+    let t0;
+    let span1;
+    let t1;
+    let t2;
+    let if_block1_anchor;
+    let current;
+    const if_block_creators = [create_if_block_2, create_else_block_1];
+    const if_blocks = [];
+    function select_block_type(ctx2, dirty) {
+      if (
+        /*isResultCorrect*/
+        ctx2[2]
+      )
+        return 0;
+      return 1;
+    }
+    current_block_type_index = select_block_type(ctx, -1);
+    if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    let if_block1 = (
+      /*resultFeedback*/
+      ctx[1] && create_if_block3(ctx)
+    );
+    return {
+      c() {
+        div = element("div");
+        span0 = element("span");
+        if_block0.c();
+        t0 = space();
+        span1 = element("span");
+        t1 = text(
+          /*resultMessage*/
+          ctx[0]
+        );
+        t2 = space();
+        if (if_block1)
+          if_block1.c();
+        if_block1_anchor = empty();
+        attr(span0, "class", span0_class_value = `${/*spanIconClass*/
+        ctx[5]} mr-2 p-0.5`);
+        attr(span1, "class", "p2");
+        attr(div, "class", "flex items-center mt-2 text-charcoal");
+      },
+      m(target, anchor) {
+        insert(target, div, anchor);
+        append(div, span0);
+        if_blocks[current_block_type_index].m(span0, null);
+        append(div, t0);
+        append(div, span1);
+        append(span1, t1);
+        insert(target, t2, anchor);
+        if (if_block1)
+          if_block1.m(target, anchor);
+        insert(target, if_block1_anchor, anchor);
+        current = true;
+      },
+      p(ctx2, [dirty]) {
+        let previous_block_index = current_block_type_index;
+        current_block_type_index = select_block_type(ctx2, dirty);
+        if (current_block_type_index !== previous_block_index) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          if_block0 = if_blocks[current_block_type_index];
+          if (!if_block0) {
+            if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block0.c();
+          } else {
+          }
+          transition_in(if_block0, 1);
+          if_block0.m(span0, null);
+        }
+        if (!current || dirty & /*spanIconClass*/
+        32 && span0_class_value !== (span0_class_value = `${/*spanIconClass*/
+        ctx2[5]} mr-2 p-0.5`)) {
+          attr(span0, "class", span0_class_value);
+        }
+        if (!current || dirty & /*resultMessage*/
+        1)
+          set_data(
+            t1,
+            /*resultMessage*/
+            ctx2[0]
+          );
+        if (
+          /*resultFeedback*/
+          ctx2[1]
+        ) {
+          if (if_block1) {
+            if_block1.p(ctx2, dirty);
+            if (dirty & /*resultFeedback*/
+            2) {
+              transition_in(if_block1, 1);
+            }
+          } else {
+            if_block1 = create_if_block3(ctx2);
+            if_block1.c();
+            transition_in(if_block1, 1);
+            if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
+          }
+        } else if (if_block1) {
+          group_outros();
+          transition_out(if_block1, 1, 1, () => {
+            if_block1 = null;
+          });
+          check_outros();
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block0);
+        transition_in(if_block1);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block0);
+        transition_out(if_block1);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(div);
+          detach(t2);
+          detach(if_block1_anchor);
+        }
+        if_blocks[current_block_type_index].d();
+        if (if_block1)
+          if_block1.d(detaching);
+      }
+    };
+  }
+  function instance3($$self, $$props, $$invalidate) {
+    let { resultMessage = "" } = $$props;
+    let { resultFeedback = null } = $$props;
+    let { isResultCorrect: isResultCorrect2 = true } = $$props;
+    let feedbackTitle = "Well done!";
+    let mainDivClass = "border-green-800 bg-green-300";
+    let spanIconClass = "text-green-800";
+    if (!isResultCorrect2) {
+      feedbackTitle = "Not quite, but you\u2019re close!";
+      mainDivClass = "border-red-800 bg-red-300";
+      spanIconClass = "text-red-800";
+    }
+    $$self.$$set = ($$props2) => {
+      if ("resultMessage" in $$props2)
+        $$invalidate(0, resultMessage = $$props2.resultMessage);
+      if ("resultFeedback" in $$props2)
+        $$invalidate(1, resultFeedback = $$props2.resultFeedback);
+      if ("isResultCorrect" in $$props2)
+        $$invalidate(2, isResultCorrect2 = $$props2.isResultCorrect);
+    };
+    return [
+      resultMessage,
+      resultFeedback,
+      isResultCorrect2,
+      feedbackTitle,
+      mainDivClass,
+      spanIconClass
+    ];
+  }
+  var PromptResult = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance3, create_fragment6, safe_not_equal, {
+        resultMessage: 0,
+        resultFeedback: 1,
+        isResultCorrect: 2
+      });
+    }
+    get resultMessage() {
+      return this.$$.ctx[0];
+    }
+    set resultMessage(resultMessage) {
+      this.$$set({ resultMessage });
+      flush();
+    }
+    get resultFeedback() {
+      return this.$$.ctx[1];
+    }
+    set resultFeedback(resultFeedback) {
+      this.$$set({ resultFeedback });
+      flush();
+    }
+    get isResultCorrect() {
+      return this.$$.ctx[2];
+    }
+    set isResultCorrect(isResultCorrect2) {
+      this.$$set({ isResultCorrect: isResultCorrect2 });
+      flush();
+    }
+  };
+  customElements.define("prompt-result", create_custom_element(PromptResult, { "resultMessage": {}, "resultFeedback": {}, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  var PromptResult_default = PromptResult;
+
+  // src/lib/components/prompt/typein/PromptTypeIn.svelte
+  function create_else_block2(ctx) {
+    let textarea;
+    let textarea_class_value;
+    let autosize_action;
+    let mounted;
+    let dispose;
+    return {
+      c() {
+        textarea = element("textarea");
+        attr(textarea, "id", idLabel);
+        attr(textarea, "placeholder", placeholder);
+        attr(textarea, "rows", "3");
+        attr(textarea, "class", textarea_class_value = `${/*inputBorderClass*/
+        ctx[2]} typein-textbox overflow-hidden`);
+        textarea.disabled = /*isDataSaving*/
+        ctx[0];
+        attr(textarea, "autocomplete", "off");
+      },
+      m(target, anchor) {
+        insert(target, textarea, anchor);
+        set_input_value(
+          textarea,
+          /*typeinAnswer*/
+          ctx[1]
+        );
+        if (!mounted) {
+          dispose = [
+            listen(
+              textarea,
+              "input",
+              /*textarea_input_handler*/
+              ctx[14]
+            ),
+            listen(
+              textarea,
+              "mousedown",
+              /*mousedown_handler*/
+              ctx[15]
+            ),
+            listen(
+              textarea,
+              "touchstart",
+              /*touchstart_handler*/
+              ctx[16],
+              { passive: true }
+            ),
+            listen(
+              textarea,
+              "focus",
+              /*focus_handler*/
+              ctx[17]
+            ),
+            listen(
+              textarea,
+              "focusout",
+              /*focusout_handler_1*/
+              ctx[18]
+            ),
+            listen(
+              textarea,
+              "keydown",
+              /*keydown_handler_1*/
+              ctx[19]
+            ),
+            action_destroyer(autosize_action = svelte_autosize_default.call(null, textarea))
+          ];
+          mounted = true;
+        }
+      },
+      p(ctx2, dirty) {
+        if (dirty & /*isDataSaving*/
+        1) {
+          textarea.disabled = /*isDataSaving*/
+          ctx2[0];
+        }
+        if (dirty & /*typeinAnswer*/
+        2) {
+          set_input_value(
+            textarea,
+            /*typeinAnswer*/
+            ctx2[1]
+          );
+        }
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(textarea);
+        }
+        mounted = false;
+        run_all(dispose);
+      }
+    };
+  }
+  function create_if_block_13(ctx) {
+    let input;
+    let input_class_value;
+    let mounted;
+    let dispose;
+    return {
+      c() {
+        input = element("input");
+        attr(input, "type", "text");
+        attr(input, "id", idLabel);
+        attr(input, "placeholder", placeholder);
+        attr(input, "class", input_class_value = `${/*inputBorderClass*/
+        ctx[2]} typein-textbox`);
+        input.disabled = /*isDataSaving*/
+        ctx[0];
+        attr(input, "autocomplete", "off");
+      },
+      m(target, anchor) {
+        insert(target, input, anchor);
+        set_input_value(
+          input,
+          /*typeinAnswer*/
+          ctx[1]
+        );
+        if (!mounted) {
+          dispose = [
+            listen(
+              input,
+              "input",
+              /*input_input_handler*/
+              ctx[11]
+            ),
+            listen(
+              input,
+              "focusout",
+              /*focusout_handler*/
+              ctx[12]
+            ),
+            listen(
+              input,
+              "keydown",
+              /*keydown_handler*/
+              ctx[13]
+            )
+          ];
+          mounted = true;
+        }
+      },
+      p(ctx2, dirty) {
+        if (dirty & /*isDataSaving*/
+        1) {
+          input.disabled = /*isDataSaving*/
+          ctx2[0];
+        }
+        if (dirty & /*typeinAnswer*/
+        2 && input.value !== /*typeinAnswer*/
+        ctx2[1]) {
+          set_input_value(
+            input,
+            /*typeinAnswer*/
+            ctx2[1]
+          );
+        }
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(input);
+        }
+        mounted = false;
+        run_all(dispose);
+      }
+    };
+  }
+  function create_default_slot2(ctx) {
+    let if_block_anchor;
+    function select_block_type(ctx2, dirty) {
+      if (
+        /*typeinType*/
+        ctx2[5] === "Short-Text"
+      )
+        return create_if_block_13;
+      return create_else_block2;
+    }
+    let current_block_type = select_block_type(ctx, -1);
+    let if_block = current_block_type(ctx);
+    return {
+      c() {
+        if_block.c();
+        if_block_anchor = empty();
+      },
+      m(target, anchor) {
+        if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
+      },
+      p(ctx2, dirty) {
+        if_block.p(ctx2, dirty);
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(if_block_anchor);
+        }
+        if_block.d(detaching);
+      }
+    };
+  }
+  function create_if_block4(ctx) {
+    let promptresult;
+    let current;
+    promptresult = new PromptResult_default({
+      props: {
+        isResultCorrect,
+        resultMessage: "[Generic \u201Ccorrect\u201D message]",
+        resultFeedback: "You applied the principles of [specific theory] perfectly in your response."
+      }
+    });
+    return {
+      c() {
+        create_component(promptresult.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(promptresult, target, anchor);
+        current = true;
+      },
+      p: noop,
+      i(local) {
+        if (current)
+          return;
+        transition_in(promptresult.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptresult.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(promptresult, detaching);
+      }
+    };
+  }
+  function create_fragment7(ctx) {
+    let promptbody;
+    let t2;
+    let if_block_anchor;
+    let current;
+    promptbody = new PromptBody_default({
+      props: {
+        rubric: (
+          /*rubric*/
+          ctx[3].text
+        ),
+        prompt: (
+          /*prompt*/
+          ctx[4]
+        ),
+        $$slots: { default: [create_default_slot2] },
+        $$scope: { ctx }
+      }
+    });
+    let if_block = isFinished && create_if_block4(ctx);
+    return {
+      c() {
+        create_component(promptbody.$$.fragment);
+        t2 = space();
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
+      },
+      m(target, anchor) {
+        mount_component(promptbody, target, anchor);
+        insert(target, t2, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
+        current = true;
+      },
+      p(ctx2, [dirty]) {
+        const promptbody_changes = {};
+        if (dirty & /*$$scope, isDataSaving, typeinAnswer*/
+        33554435) {
+          promptbody_changes.$$scope = { dirty, ctx: ctx2 };
+        }
+        promptbody.$set(promptbody_changes);
+        if (isFinished)
+          if_block.p(ctx2, dirty);
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(promptbody.$$.fragment, local);
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptbody.$$.fragment, local);
+        transition_out(if_block);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(t2);
+          detach(if_block_anchor);
+        }
+        destroy_component(promptbody, detaching);
+        if (if_block)
+          if_block.d(detaching);
+      }
+    };
+  }
+  var idLabel = "answerText";
+  var placeholder = "Type your answer here";
+  var isFinished = false;
+  var isResultCorrect = true;
+  function instance4($$self, $$props, $$invalidate) {
+    let { sessionData } = $$props;
+    let { isDataSaving } = $$props;
+    const dispatch = createEventDispatcher();
+    let typeinAnswer;
+    let latestAnswer = "";
+    let focusOrigin = "tab";
+    const inputBorderClass = !isFinished ? "" : isResultCorrect ? "border-2 border-green-800" : "border-2 border-red-800";
+    const { rubric, interaction, metadata } = sessionData;
+    const { prompt, typein_type: typeinType } = interaction;
+    if (metadata) {
+      const events = metadata.interactions.events.pop();
+      latestAnswer = typeinAnswer = events.answer;
+    }
+    const saveAnswer = () => {
+      focusOrigin = "tab";
+      if (isDataSaving || typeinAnswer === latestAnswer || !typeinAnswer && !latestAnswer)
+        return;
+      latestAnswer = typeinAnswer;
+      dispatch("saveAnswer", { answer: typeinAnswer || "" });
+    };
+    const saveOnEnter = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        saveAnswer();
+      }
+    };
+    const handleFocus = (event) => {
+      if (focusOrigin !== "click") {
+        const textarea = event.target;
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+      }
+    };
+    const handleClick = () => {
+      focusOrigin = "click";
+    };
+    function input_input_handler() {
+      typeinAnswer = this.value;
+      $$invalidate(1, typeinAnswer);
+    }
+    const focusout_handler = () => saveAnswer();
+    const keydown_handler = (event) => saveOnEnter(event);
+    function textarea_input_handler() {
+      typeinAnswer = this.value;
+      $$invalidate(1, typeinAnswer);
+    }
+    const mousedown_handler = () => handleClick();
+    const touchstart_handler = () => handleClick();
+    const focus_handler = (event) => handleFocus(event);
+    const focusout_handler_1 = () => saveAnswer();
+    const keydown_handler_1 = (event) => saveOnEnter(event);
+    $$self.$$set = ($$props2) => {
+      if ("sessionData" in $$props2)
+        $$invalidate(10, sessionData = $$props2.sessionData);
+      if ("isDataSaving" in $$props2)
         $$invalidate(0, isDataSaving = $$props2.isDataSaving);
     };
     return [
       isDataSaving,
-      selectedOption,
+      typeinAnswer,
+      inputBorderClass,
       rubric,
       prompt,
-      options,
-      promptRubricHeaderElem,
-      handleOptionClick,
+      typeinType,
+      saveAnswer,
+      saveOnEnter,
+      handleFocus,
+      handleClick,
       sessionData,
-      click_handler
+      input_input_handler,
+      focusout_handler,
+      keydown_handler,
+      textarea_input_handler,
+      mousedown_handler,
+      touchstart_handler,
+      focus_handler,
+      focusout_handler_1,
+      keydown_handler_1
     ];
   }
-  var PromptMCQ = class extends SvelteComponent {
+  var PromptTypeIn = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance, create_fragment, safe_not_equal, { sessionData: 7, isDataSaving: 0 });
+      init(this, options, instance4, create_fragment7, safe_not_equal, { sessionData: 10, isDataSaving: 0 });
     }
     get sessionData() {
-      return this.$$.ctx[7];
+      return this.$$.ctx[10];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -1306,11 +2635,11 @@
       flush();
     }
   };
-  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {} }, [], [], true));
-  var PromptMCQ_default = PromptMCQ;
+  customElements.define("prompt-typein", create_custom_element(PromptTypeIn, { "sessionData": {}, "isDataSaving": {} }, [], [], true));
+  var PromptTypeIn_default = PromptTypeIn;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
-  function create_fragment2(ctx) {
+  function create_fragment8(ctx) {
     let div3;
     return {
       c() {
@@ -1333,28 +2662,38 @@
   var PromptSkeleton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment2, safe_not_equal, {});
+      init(this, options, null, create_fragment8, safe_not_equal, {});
     }
   };
   customElements.define("prompt-skeleton", create_custom_element(PromptSkeleton, {}, [], [], true));
   var PromptSkeleton_default = PromptSkeleton;
 
-  // src/lib/components/prompt/PromptBuilder.svelte
-  function add_css(target) {
-    append_styles(target, "svelte-1i5tmfz", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(107 121 121/var(--tw-border-opacity))}@keyframes svelte-1i5tmfz-pulse{50%{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-1i5tmfz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>.choice{--tw-border-opacity:1}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.rounded{border-radius:0.25rem}.border-2{border-width:2px}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-2{padding:0.5rem}.text-left{text-align:left}.font-semibold{font-weight:600}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:mb-4{margin-bottom:1rem}}');
-  }
-  function create_else_block(ctx) {
+  // src/lib/components/common/InvalidBanner.svelte
+  function create_fragment9(ctx) {
     let p;
+    let t2;
     return {
       c() {
         p = element("p");
-        p.textContent = "Invalid session id.";
+        t2 = text(
+          /*bannerLabel*/
+          ctx[0]
+        );
         attr(p, "class", "p-2 border-2 border-red-600 bg-red-200 rounded");
       },
       m(target, anchor) {
         insert(target, p, anchor);
+        append(p, t2);
+      },
+      p(ctx2, [dirty]) {
+        if (dirty & /*bannerLabel*/
+        1)
+          set_data(
+            t2,
+            /*bannerLabel*/
+            ctx2[0]
+          );
       },
-      p: noop,
       i: noop,
       o: noop,
       d(detaching) {
@@ -1364,10 +2703,194 @@
       }
     };
   }
-  function create_if_block_12(ctx) {
-    let promptmcq;
+  function instance5($$self, $$props, $$invalidate) {
+    let { bannerLabel: bannerLabel2 = "Invalid." } = $$props;
+    $$self.$$set = ($$props2) => {
+      if ("bannerLabel" in $$props2)
+        $$invalidate(0, bannerLabel2 = $$props2.bannerLabel);
+    };
+    return [bannerLabel2];
+  }
+  var InvalidBanner = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance5, create_fragment9, safe_not_equal, { bannerLabel: 0 });
+    }
+    get bannerLabel() {
+      return this.$$.ctx[0];
+    }
+    set bannerLabel(bannerLabel2) {
+      this.$$set({ bannerLabel: bannerLabel2 });
+      flush();
+    }
+  };
+  customElements.define("invalid-banner", create_custom_element(InvalidBanner, { "bannerLabel": {} }, [], [], true));
+  var InvalidBanner_default = InvalidBanner;
+
+  // src/lib/components/prompt/PromptBuilder.svelte
+  function add_css(target) {
+    append_styles(target, "svelte-12rerkj", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(107 121 121/var(--tw-border-opacity))}@keyframes svelte-12rerkj-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-12rerkj-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>.choice{--tw-border-opacity:1}.typein-textbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.mt-2{margin-top:0.5rem}.block{display:block}.flex{display:flex}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.items-start{align-items:flex-start}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.border-2{border-width:2px}.border-l-\\[6px\\]{border-left-width:6px}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.font-semibold{font-weight:600}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:mb-4{margin-bottom:1rem}}');
+  }
+  function create_else_block_12(ctx) {
+    let invalidbanner;
     let current;
-    promptmcq = new PromptMCQ_default({
+    invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
+    return {
+      c() {
+        create_component(invalidbanner.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(invalidbanner, target, anchor);
+        current = true;
+      },
+      p: noop,
+      i(local) {
+        if (current)
+          return;
+        transition_in(invalidbanner.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(invalidbanner.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(invalidbanner, detaching);
+      }
+    };
+  }
+  function create_if_block_14(ctx) {
+    let current_block_type_index;
+    let if_block;
+    let if_block_anchor;
+    let current;
+    const if_block_creators = [create_if_block_22, create_if_block_3, create_else_block3];
+    const if_blocks = [];
+    function select_block_type_1(ctx2, dirty) {
+      if (
+        /*interactionType*/
+        ctx2[3] === "multipleChoiceInteraction"
+      )
+        return 0;
+      if (
+        /*interactionType*/
+        ctx2[3] === "typeInInteraction"
+      )
+        return 1;
+      return 2;
+    }
+    current_block_type_index = select_block_type_1(ctx, -1);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    return {
+      c() {
+        if_block.c();
+        if_block_anchor = empty();
+      },
+      m(target, anchor) {
+        if_blocks[current_block_type_index].m(target, anchor);
+        insert(target, if_block_anchor, anchor);
+        current = true;
+      },
+      p(ctx2, dirty) {
+        let previous_block_index = current_block_type_index;
+        current_block_type_index = select_block_type_1(ctx2, dirty);
+        if (current_block_type_index === previous_block_index) {
+          if_blocks[current_block_type_index].p(ctx2, dirty);
+        } else {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          if_block = if_blocks[current_block_type_index];
+          if (!if_block) {
+            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block.c();
+          } else {
+            if_block.p(ctx2, dirty);
+          }
+          transition_in(if_block, 1);
+          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(if_block_anchor);
+        }
+        if_blocks[current_block_type_index].d(detaching);
+      }
+    };
+  }
+  function create_if_block5(ctx) {
+    let promptskeleton;
+    let current;
+    promptskeleton = new PromptSkeleton_default({});
+    return {
+      c() {
+        create_component(promptskeleton.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(promptskeleton, target, anchor);
+        current = true;
+      },
+      p: noop,
+      i(local) {
+        if (current)
+          return;
+        transition_in(promptskeleton.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptskeleton.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(promptskeleton, detaching);
+      }
+    };
+  }
+  function create_else_block3(ctx) {
+    let invalidbanner;
+    let current;
+    invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
+    return {
+      c() {
+        create_component(invalidbanner.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(invalidbanner, target, anchor);
+        current = true;
+      },
+      p: noop,
+      i(local) {
+        if (current)
+          return;
+        transition_in(invalidbanner.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(invalidbanner.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(invalidbanner, detaching);
+      }
+    };
+  }
+  function create_if_block_3(ctx) {
+    let prompttypein;
+    let current;
+    prompttypein = new PromptTypeIn_default({
       props: {
         sessionData: (
           /*sessionData*/
@@ -1379,80 +2902,107 @@
         )
       }
     });
-    promptmcq.$on(
-      "saveOption",
-      /*saveOption*/
-      ctx[3]
+    prompttypein.$on(
+      "saveAnswer",
+      /*saveEvent*/
+      ctx[4]
     );
     return {
       c() {
-        create_component(promptmcq.$$.fragment);
+        create_component(prompttypein.$$.fragment);
       },
       m(target, anchor) {
-        mount_component(promptmcq, target, anchor);
+        mount_component(prompttypein, target, anchor);
         current = true;
       },
       p(ctx2, dirty) {
-        const promptmcq_changes = {};
+        const prompttypein_changes = {};
         if (dirty & /*sessionData*/
         1)
-          promptmcq_changes.sessionData = /*sessionData*/
+          prompttypein_changes.sessionData = /*sessionData*/
           ctx2[0];
         if (dirty & /*isDataSaving*/
         4)
-          promptmcq_changes.isDataSaving = /*isDataSaving*/
+          prompttypein_changes.isDataSaving = /*isDataSaving*/
           ctx2[2];
-        promptmcq.$set(promptmcq_changes);
+        prompttypein.$set(prompttypein_changes);
       },
       i(local) {
         if (current)
           return;
-        transition_in(promptmcq.$$.fragment, local);
+        transition_in(prompttypein.$$.fragment, local);
         current = true;
       },
       o(local) {
-        transition_out(promptmcq.$$.fragment, local);
+        transition_out(prompttypein.$$.fragment, local);
         current = false;
       },
       d(detaching) {
-        destroy_component(promptmcq, detaching);
+        destroy_component(prompttypein, detaching);
       }
     };
   }
-  function create_if_block2(ctx) {
-    let promptskeleton;
+  function create_if_block_22(ctx) {
+    let promptmcq;
     let current;
-    promptskeleton = new PromptSkeleton_default({});
+    promptmcq = new PromptMCQ_default({
+      props: {
+        sessionData: (
+          /*sessionData*/
+          ctx[0]
+        ),
+        isDataSaving: (
+          /*isDataSaving*/
+          ctx[2]
+        )
+      }
+    });
+    promptmcq.$on(
+      "saveOption",
+      /*saveEvent*/
+      ctx[4]
+    );
     return {
       c() {
-        create_component(promptskeleton.$$.fragment);
+        create_component(promptmcq.$$.fragment);
       },
       m(target, anchor) {
-        mount_component(promptskeleton, target, anchor);
+        mount_component(promptmcq, target, anchor);
         current = true;
       },
-      p: noop,
+      p(ctx2, dirty) {
+        const promptmcq_changes = {};
+        if (dirty & /*sessionData*/
+        1)
+          promptmcq_changes.sessionData = /*sessionData*/
+          ctx2[0];
+        if (dirty & /*isDataSaving*/
+        4)
+          promptmcq_changes.isDataSaving = /*isDataSaving*/
+          ctx2[2];
+        promptmcq.$set(promptmcq_changes);
+      },
       i(local) {
         if (current)
           return;
-        transition_in(promptskeleton.$$.fragment, local);
+        transition_in(promptmcq.$$.fragment, local);
         current = true;
       },
       o(local) {
-        transition_out(promptskeleton.$$.fragment, local);
+        transition_out(promptmcq.$$.fragment, local);
         current = false;
       },
       d(detaching) {
-        destroy_component(promptskeleton, detaching);
+        destroy_component(promptmcq, detaching);
       }
     };
   }
-  function create_fragment3(ctx) {
+  function create_fragment10(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block2, create_if_block_12, create_else_block];
+    const if_block_creators = [create_if_block5, create_if_block_14, create_else_block_12];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (
@@ -1519,12 +3069,14 @@
       }
     };
   }
-  function instance2($$self, $$props, $$invalidate) {
+  var bannerLabel = "Invalid session id.";
+  function instance6($$self, $$props, $$invalidate) {
     const { "session-id": sessionId } = $$props;
     useSetupAPI();
     let sessionData;
     let isDataFetching = true;
     let isDataSaving = false;
+    let interactionType = null;
     const skipUserValidationStr = get_store_value(skipUserValidation) ? "?skip_user_validation=true" : "";
     const getSessionData = async (sessionId2) => {
       try {
@@ -1540,20 +3092,28 @@
     const getItemData = async (itemId, metadata) => {
       try {
         const { data } = await useGet(`items/${itemId}`);
+        $$invalidate(3, interactionType = getInteractionType(data));
         $$invalidate(0, sessionData = { ...data, metadata });
       } catch (error) {
       } finally {
         $$invalidate(1, isDataFetching = false);
       }
     };
-    const saveOption = async ({ detail }) => {
-      $$invalidate(2, isDataSaving = true);
+    const getInteractionType = (data) => {
+      let interactionType2 = null;
+      if (data) {
+        const { interaction } = data;
+        if (interaction) {
+          const { type } = interaction;
+          interactionType2 = type || null;
+        }
+      }
+      return interactionType2;
+    };
+    const saveEvent = async ({ detail }) => {
       try {
-        const { answerChoiceId, answerChoice } = detail;
-        await usePatch(`sessions/${sessionId}${skipUserValidationStr}`, {
-          answer_id: answerChoiceId,
-          answer_choice: answerChoice
-        });
+        $$invalidate(2, isDataSaving = true);
+        await usePatch(`sessions/${sessionId}${skipUserValidationStr}`, detail);
       } catch (error) {
         $$invalidate(2, isDataSaving = false);
       } finally {
@@ -1564,15 +3124,15 @@
       getSessionData(sessionId);
     }
     $$self.$$set = ($$new_props) => {
-      $$invalidate(8, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+      $$invalidate(10, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
     };
     $$props = exclude_internal_props($$props);
-    return [sessionData, isDataFetching, isDataSaving, saveOption];
+    return [sessionData, isDataFetching, isDataSaving, interactionType, saveEvent];
   }
   var PromptBuilder = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance2, create_fragment3, safe_not_equal, {}, add_css);
+      init(this, options, instance6, create_fragment10, safe_not_equal, {}, add_css);
     }
   };
   customElements.define("prompt-builder", create_custom_element(PromptBuilder, {}, [], [], true));