eat-js-sdk 0.0.6 → 0.0.8

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, instance6, create_fragment7, 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 = instance6 ? instance6(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_fragment7 ? create_fragment7($$.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,46 +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 = (
-      /*buildPromptRubric*/
-      ctx[6](
-        /*rubric*/
-        ctx[2].text,
-        "item-heading mb-2 md:mb-4"
-      ) + ""
-    );
-    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]
@@ -1036,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();
         }
@@ -1047,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);
@@ -1097,7 +1364,7 @@
     let t1;
     let t2_value = (
       /*option*/
-      ctx[13].answer + ""
+      ctx[12].answer + ""
     );
     let t2;
     let t3;
@@ -1108,9 +1375,9 @@
     function click_handler() {
       return (
         /*click_handler*/
-        ctx[8](
+        ctx[7](
           /*option*/
-          ctx[13]
+          ctx[12]
         )
       );
     }
@@ -1120,7 +1387,7 @@
         span = element("span");
         span.textContent = `${useMCQ_default(
           /*index*/
-          ctx[15]
+          ctx[14]
         )}`;
         t1 = space();
         t2 = text(t2_value);
@@ -1128,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);
@@ -1153,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);
         }
       },
@@ -1176,115 +1443,116 @@
       }
     };
   }
-  function create_fragment(ctx) {
-    let div1;
-    let t0;
-    let html_tag;
-    let raw_value = (
-      /*buildPromptRubric*/
-      ctx[6](
-        /*prompt*/
-        ctx[3],
-        "item-heading font-semibold"
-      ) + ""
-    );
-    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();
-    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 buildPromptRubric = (elemText, elemClass) => {
-      const heading = get_store_value(promptRubricElem);
-      return `<${heading} class="${elemClass}">${elemText}</${heading}>`;
-    };
-    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)
-        $$invalidate(0, isDataSaving = $$props2.isDataSaving);
-    };
+  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,
@@ -1292,7 +1560,6 @@
       prompt,
       options,
       handleOptionClick,
-      buildPromptRubric,
       sessionData,
       click_handler
     ];
@@ -1300,10 +1567,10 @@
   var PromptMCQ = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance, create_fragment, safe_not_equal, { sessionData: 7, isDataSaving: 0 });
+      init(this, options, instance2, create_fragment2, safe_not_equal, { sessionData: 6, isDataSaving: 0 });
     }
     get sessionData() {
-      return this.$$.ctx[7];
+      return this.$$.ctx[6];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -1320,8 +1587,386 @@
   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/components/prompt/typein/PromptTypeIn.svelte
+  function create_else_block(ctx) {
+    let textarea;
+    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", "typein-textbox overflow-hidden");
+        textarea.disabled = /*isDataSaving*/
+        ctx[0];
+      },
+      m(target, anchor) {
+        insert(target, textarea, anchor);
+        set_input_value(
+          textarea,
+          /*typeinAnswer*/
+          ctx[1]
+        );
+        if (!mounted) {
+          dispose = [
+            listen(
+              textarea,
+              "input",
+              /*textarea_input_handler*/
+              ctx[11]
+            ),
+            listen(
+              textarea,
+              "focusout",
+              /*focusout_handler_1*/
+              ctx[12]
+            ),
+            listen(
+              textarea,
+              "keydown",
+              /*keydown_handler_1*/
+              ctx[13]
+            ),
+            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_block3(ctx) {
+    let input;
+    let mounted;
+    let dispose;
+    return {
+      c() {
+        input = element("input");
+        attr(input, "type", "text");
+        attr(input, "id", idLabel);
+        attr(input, "placeholder", placeholder);
+        attr(input, "class", "typein-textbox");
+        input.disabled = /*isDataSaving*/
+        ctx[0];
+      },
+      m(target, anchor) {
+        insert(target, input, anchor);
+        set_input_value(
+          input,
+          /*typeinAnswer*/
+          ctx[1]
+        );
+        if (!mounted) {
+          dispose = [
+            listen(
+              input,
+              "input",
+              /*input_input_handler*/
+              ctx[8]
+            ),
+            listen(
+              input,
+              "focusout",
+              /*focusout_handler*/
+              ctx[9]
+            ),
+            listen(
+              input,
+              "keydown",
+              /*keydown_handler*/
+              ctx[10]
+            )
+          ];
+          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[4] === "Short-Text"
+      )
+        return create_if_block3;
+      return create_else_block;
+    }
+    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_fragment3(ctx) {
+    let promptbody;
+    let current;
+    promptbody = new PromptBody_default({
+      props: {
+        rubric: (
+          /*rubric*/
+          ctx[2].text
+        ),
+        prompt: (
+          /*prompt*/
+          ctx[3]
+        ),
+        $$slots: { default: [create_default_slot2] },
+        $$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, isDataSaving, typeinAnswer*/
+        262147) {
+          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);
+      }
+    };
+  }
+  var idLabel = "answerText";
+  var placeholder = "Type your answer here";
+  function instance3($$self, $$props, $$invalidate) {
+    let { sessionData } = $$props;
+    let { isDataSaving } = $$props;
+    const dispatch = createEventDispatcher();
+    let typeinAnswer;
+    let latestAnswer = "";
+    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 = () => {
+      if (isDataSaving || typeinAnswer === latestAnswer || !typeinAnswer && !latestAnswer)
+        return;
+      latestAnswer = typeinAnswer;
+      dispatch("saveAnswer", { answer: typeinAnswer || "" });
+    };
+    const saveOnEnter = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        saveAnswer();
+      }
+    };
+    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 focusout_handler_1 = () => saveAnswer();
+    const keydown_handler_1 = (event) => saveOnEnter(event);
+    $$self.$$set = ($$props2) => {
+      if ("sessionData" in $$props2)
+        $$invalidate(7, sessionData = $$props2.sessionData);
+      if ("isDataSaving" in $$props2)
+        $$invalidate(0, isDataSaving = $$props2.isDataSaving);
+    };
+    return [
+      isDataSaving,
+      typeinAnswer,
+      rubric,
+      prompt,
+      typeinType,
+      saveAnswer,
+      saveOnEnter,
+      sessionData,
+      input_input_handler,
+      focusout_handler,
+      keydown_handler,
+      textarea_input_handler,
+      focusout_handler_1,
+      keydown_handler_1
+    ];
+  }
+  var PromptTypeIn = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance3, create_fragment3, safe_not_equal, { sessionData: 7, isDataSaving: 0 });
+    }
+    get sessionData() {
+      return this.$$.ctx[7];
+    }
+    set sessionData(sessionData) {
+      this.$$set({ sessionData });
+      flush();
+    }
+    get isDataSaving() {
+      return this.$$.ctx[0];
+    }
+    set isDataSaving(isDataSaving) {
+      this.$$set({ isDataSaving });
+      flush();
+    }
+  };
+  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_fragment4(ctx) {
     let div3;
     return {
       c() {
@@ -1344,28 +1989,38 @@
   var PromptSkeleton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment2, safe_not_equal, {});
+      init(this, options, null, create_fragment4, 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_fragment5(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) {
@@ -1375,10 +2030,194 @@
       }
     };
   }
+  function instance4($$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, instance4, create_fragment5, 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-1h69jp4", '*,: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-1h69jp4-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-1h69jp4-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-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.overflow-hidden{overflow:hidden}.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_1(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_12(ctx) {
-    let promptmcq;
+    let current_block_type_index;
+    let if_block;
+    let if_block_anchor;
     let current;
-    promptmcq = new PromptMCQ_default({
+    const if_block_creators = [create_if_block_2, create_if_block_3, create_else_block2];
+    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_block4(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_block2(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*/
@@ -1390,80 +2229,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_2(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_fragment6(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_block4, create_if_block_12, create_else_block_1];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (
@@ -1530,12 +2396,14 @@
       }
     };
   }
-  function instance2($$self, $$props, $$invalidate) {
+  var bannerLabel = "Invalid session id.";
+  function instance5($$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 {
@@ -1551,20 +2419,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 {
@@ -1575,15 +2451,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, instance5, create_fragment6, safe_not_equal, {}, add_css);
     }
   };
   customElements.define("prompt-builder", create_custom_element(PromptBuilder, {}, [], [], true));