@scalar/agent-chat 0.1.2 → 0.2.1

package/dist/views/PromptForm.vue2.js

@@ -1,11 +1,23 @@
-import { defineComponent, useTemplateRef, computed, watch, createElementBlock, openBlock, createElementVNode, withModifiers, withDirectives, unref, vModelText, createBlock, normalizeClass, createVNode, createTextVNode } from "vue";
+import { defineComponent, useTemplateRef, computed, watch, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createElementVNode, unref, withModifiers, withDirectives, vModelText, createVNode, withCtx, renderList, createTextVNode, toDisplayString } from "vue";
 import { ScalarIconButton, ScalarLoading } from "@scalar/components";
-import { ScalarIconPlay, ScalarIconArrowUp } from "@scalar/icons";
+import { ScalarIconPlus, ScalarIconX, ScalarIconLockSimple, ScalarIconArrowUp } from "@scalar/icons";
+import { MAX_PROMPT_SIZE } from "@scalar-org/entities/agent";
+import ApprovalSection from "../components/ApprovalSection.vue.js";
+import ErrorMessageMessage from "../components/ErrorMessage.vue.js";
+import SearchPopover from "../components/SearchPopover.vue.js";
+import { useChatApprovals } from "../hooks/useChatApprovals.js";
 import { useState } from "../state/state.js";
 const _hoisted_1 = { class: "actionContainer" };
 const _hoisted_2 = ["disabled"];
 const _hoisted_3 = { class: "inputActionsContainer" };
-const _hoisted_4 = { class: "contextContainer" };
+const _hoisted_4 = { class: "inputActionsLeft" };
+const _hoisted_5 = {
+  class: "addAPIButton",
+  type: "button"
+};
+const _hoisted_6 = ["src"];
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "inputActionsRight" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PromptForm",
   emits: ["submit"],
@@ -15,6 +27,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const promptRef = useTemplateRef("prompt");
     const state = useState();
     const inputHasContent = computed(() => state.prompt.value.trim().length > 0);
+    const promptTooLarge = computed(
+      () => state.prompt.value.trim().length > MAX_PROMPT_SIZE
+    );
     watch(state.prompt, () => {
       if (!promptRef?.value) return;
       if (!state.prompt.value.length) {
@@ -24,9 +39,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       promptRef.value.style.height = "auto";
       promptRef.value.style.height = promptRef.value.scrollHeight + "px";
     });
-    function onAutoSendClick() {
-      state.mode.value = state.mode.value === "agent" ? "search" : "agent";
-    }
     function handleSubmit() {
       if (!inputHasContent.value) return;
       emit("submit");
@@ -48,74 +60,119 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (status === "ready" || status === "error") promptRef.value?.focus();
       }
     );
+    const { respondToToolCalls, approvalRequestedParts } = useChatApprovals();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("form", {
-          class: "promptForm",
-          onSubmit: withModifiers(handleSubmit, ["prevent"])
-        }, [
-          withDirectives(createElementVNode("textarea", {
-            ref: "prompt",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(state).prompt.value = $event),
-            class: "prompt",
-            disabled: unref(state).loading.value,
-            name: "prompt",
-            placeholder: "Ask me anything...",
-            onKeydown: handlePromptKeydown
-          }, null, 40, _hoisted_2), [
-            [vModelText, unref(state).prompt.value]
-          ]),
-          createElementVNode("div", _hoisted_3, [
-            createElementVNode("button", {
-              class: normalizeClass(["autoSendButton", {
-                "autoSendButton-enabled": unref(state).mode.value === "agent"
-              }]),
-              type: "button",
-              onClick: onAutoSendClick
-            }, [
-              createVNode(unref(ScalarIconPlay), { weight: "bold" }),
-              _cache[2] || (_cache[2] = createTextVNode(" Agent Mode ", -1))
-            ], 2),
-            !unref(state).loading.value ? (openBlock(), createBlock(unref(ScalarIconButton), {
-              key: 0,
-              class: "sendButton",
-              disabled: !inputHasContent.value,
-              icon: unref(ScalarIconArrowUp),
-              label: "Scalar",
-              size: "md",
-              type: "submit",
-              weight: "bold"
-            }, null, 8, ["disabled", "icon"])) : (openBlock(), createBlock(unref(ScalarLoading), {
-              key: 1,
-              class: "loader",
-              loader: {
-                isLoading: unref(state).loading.value,
-                isValid: false,
-                clear: async () => {
-                },
-                invalidate: async () => {
-                },
-                isInvalid: false,
-                isActive: false,
-                validate: async () => {
-                },
-                start: () => {
-                }
-              },
-              size: "2xl"
-            }, null, 8, ["loader"]))
-          ])
-        ], 32),
-        createElementVNode("div", _hoisted_4, [
-          _cache[3] || (_cache[3] = createElementVNode("span", null, "Type @ to add context from other API's", -1)),
-          createElementVNode("button", {
-            class: "settingsButton",
-            label: "Settings",
-            type: "button",
-            onClick: _cache[1] || (_cache[1] = ($event) => unref(state).settingsModal.show())
-          }, " Settings ")
+      return openBlock(), createElementBlock(Fragment, null, [
+        unref(state).chat.error ? (openBlock(), createBlock(ErrorMessageMessage, {
+          key: 0,
+          error: unref(state).chat.error
+        }, null, 8, ["error"])) : createCommentVNode("", true),
+        unref(approvalRequestedParts).length ? (openBlock(), createBlock(ApprovalSection, {
+          key: 1,
+          onApprove: _cache[0] || (_cache[0] = ($event) => unref(respondToToolCalls)(true)),
+          onReject: _cache[1] || (_cache[1] = ($event) => unref(respondToToolCalls)(false))
+        })) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("form", {
+            class: "promptForm",
+            onSubmit: withModifiers(handleSubmit, ["prevent"])
+          }, [
+            _cache[4] || (_cache[4] = createElementVNode("label", {
+              class: "agentLabel",
+              for: "agentTextarea"
+            }, " Type a Request To get Started ", -1)),
+            withDirectives(createElementVNode("textarea", {
+              id: "agentTextarea",
+              ref: "prompt",
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).prompt.value = $event),
+              class: "prompt custom-scroll",
+              disabled: unref(state).loading.value,
+              name: "prompt",
+              placeholder: "Ask me anything...",
+              onKeydown: handlePromptKeydown
+            }, null, 40, _hoisted_2), [
+              [vModelText, unref(state).prompt.value]
+            ]),
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
+                createVNode(SearchPopover, null, {
+                  default: withCtx(() => [
+                    createElementVNode("button", _hoisted_5, [
+                      createVNode(unref(ScalarIconPlus), {
+                        class: "size-4",
+                        weight: "bold"
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).registryDocuments.value, (document2) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: document2.id,
+                    class: "apiPill"
+                  }, [
+                    document2.logoUrl ? (openBlock(), createElementBlock("img", {
+                      key: 0,
+                      class: "apiPillLogo",
+                      src: document2.logoUrl
+                    }, null, 8, _hoisted_6)) : createCommentVNode("", true),
+                    createTextVNode(" " + toDisplayString(document2.title) + " ", 1),
+                    createElementVNode("button", {
+                      class: "apiPillRemove",
+                      type: "button",
+                      onClick: ($event) => unref(state).removeDocument(document2)
+                    }, [
+                      createVNode(unref(ScalarIconX), {
+                        class: "size-4",
+                        weight: "bold"
+                      })
+                    ], 8, _hoisted_7)
+                  ]);
+                }), 128))
+              ]),
+              createElementVNode("div", _hoisted_8, [
+                !unref(state).loading.value ? (openBlock(), createBlock(unref(ScalarIconButton), {
+                  key: 0,
+                  class: "settingsButton h-7 w-7 p-1.5",
+                  icon: unref(ScalarIconLockSimple),
+                  label: "Scalar",
+                  size: "md",
+                  weight: "bold",
+                  onClick: _cache[3] || (_cache[3] = ($event) => unref(state).settingsModal.show())
+                }, null, 8, ["icon"])) : createCommentVNode("", true),
+                !unref(state).loading.value ? (openBlock(), createBlock(unref(ScalarIconButton), {
+                  key: 1,
+                  class: "sendButton h-7 w-7 p-1.5",
+                  disabled: !inputHasContent.value || promptTooLarge.value,
+                  icon: unref(ScalarIconArrowUp),
+                  label: "Scalar",
+                  size: "md",
+                  type: "submit",
+                  weight: "bold"
+                }, null, 8, ["disabled", "icon"])) : (openBlock(), createBlock(unref(ScalarLoading), {
+                  key: 2,
+                  class: "loader h-7 w-7",
+                  loader: {
+                    isLoading: unref(state).loading.value,
+                    isValid: false,
+                    clear: async () => {
+                    },
+                    invalidate: async () => {
+                    },
+                    isInvalid: false,
+                    isActive: false,
+                    validate: async () => {
+                    },
+                    start: () => {
+                    }
+                  },
+                  size: "2xl"
+                }, null, 8, ["loader"]))
+              ])
+            ])
+          ], 32)
         ])
-      ]);
+      ], 64);
     };
   }
 });

package/dist/views/PromptForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptForm.vue2.js","sources":["../../src/views/PromptForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { ScalarIconButton, ScalarLoading } from '@scalar/components'\nimport { ScalarIconArrowUp, ScalarIconPlay } from '@scalar/icons'\n\nimport { useState } from '@/state/state'\n\nconst emit = defineEmits<{\n  (e: 'submit'): void\n}>()\n\ndefineExpose({ focusPrompt })\n\nconst promptRef = useTemplateRef<HTMLTextAreaElement>('prompt')\n\nconst state = useState()\nconst inputHasContent = computed(() => state.prompt.value.trim().length > 0)\n\nwatch(state.prompt, () => {\n  if (!promptRef?.value) return\n\n  if (!state.prompt.value.length) {\n    promptRef.value.style.height = '0px'\n    return\n  }\n\n  promptRef.value.style.height = 'auto'\n  promptRef.value.style.height = promptRef.value.scrollHeight + 'px'\n})\n\nfunction onAutoSendClick() {\n  state.mode.value = state.mode.value === 'agent' ? 'search' : 'agent'\n}\n\nfunction handleSubmit() {\n  if (!inputHasContent.value) return\n\n  emit('submit')\n}\n\nfunction handlePromptKeydown(e: KeyboardEvent) {\n  if (state.loading.value) return\n\n  if (e.key === 'Enter' && !e.shiftKey) {\n    e.preventDefault()\n    handleSubmit()\n    window.scrollTo(0, document.body.scrollHeight)\n  }\n}\n\nfunction focusPrompt() {\n  promptRef.value?.focus()\n}\n\nwatch(\n  () => state.chat.status,\n  (status) => {\n    if (status === 'ready' || status === 'error') promptRef.value?.focus()\n  },\n)\n</script>\n\n<template>\n  <div class=\"actionContainer\">\n    <form\n      class=\"promptForm\"\n      @submit.prevent=\"handleSubmit\">\n      <textarea\n        ref=\"prompt\"\n        v-model=\"state.prompt.value\"\n        class=\"prompt\"\n        :disabled=\"state.loading.value\"\n        name=\"prompt\"\n        placeholder=\"Ask me anything...\"\n        @keydown=\"handlePromptKeydown\" />\n      <div class=\"inputActionsContainer\">\n        <button\n          class=\"autoSendButton\"\n          :class=\"{\n            'autoSendButton-enabled': state.mode.value === 'agent',\n          }\"\n          type=\"button\"\n          @click=\"onAutoSendClick\">\n          <ScalarIconPlay weight=\"bold\" />\n          Agent Mode\n        </button>\n        <ScalarIconButton\n          v-if=\"!state.loading.value\"\n          class=\"sendButton\"\n          :disabled=\"!inputHasContent\"\n          :icon=\"ScalarIconArrowUp\"\n          label=\"Scalar\"\n          size=\"md\"\n          type=\"submit\"\n          weight=\"bold\" />\n        <ScalarLoading\n          v-else\n          class=\"loader\"\n          :loader=\"{\n            isLoading: state.loading.value,\n            isValid: false,\n            clear: async () => {},\n            invalidate: async () => {},\n            isInvalid: false,\n            isActive: false,\n            validate: async () => {},\n            start: () => {},\n          }\"\n          size=\"2xl\" />\n      </div>\n    </form>\n    <div class=\"contextContainer\">\n      <span>Type @ to add context from other API's</span>\n      <button\n        class=\"settingsButton\"\n        label=\"Settings\"\n        type=\"button\"\n        @click=\"state.settingsModal.show()\">\n        Settings\n      </button>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.actionContainer {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-2),\n    var(--scalar-background-1)\n  );\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 22px 22px 12px 12px;\n  width: 100%;\n  /* visually hides overflowing text below */\n  box-shadow: 0 50px 0 2px var(--scalar-background-1);\n}\n.promptForm {\n  width: 100%;\n  position: relative;\n  display: flex;\n}\n\n.inputActionsContainer {\n  display: flex;\n  justify-content: space-between;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 0 8px 8px 8px;\n  pointer-events: none;\n}\n\n.prompt {\n  width: 100%;\n  resize: none;\n  background: var(--scalar-background-1);\n  border-radius: 22px;\n  box-shadow: var(--scalar-shadow-1);\n  outline: none;\n  border: none;\n  font-family: var(--scalar-font);\n  font-size: 16px;\n  padding: 12px;\n  min-height: 92px;\n  field-sizing: content;\n  padding-bottom: 48px;\n  word-wrap: break-word;\n}\n.dark-mode .prompt {\n  background: var(--scalar-background-2);\n  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.prompt:focus-within {\n  box-shadow: 0 0 0 1.5px var(--scalar-color-blue);\n}\n.prompt:disabled {\n  color: var(--scalar-color-3);\n}\n\n.autoSendButton {\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-font-size-3);\n  padding: 0 8px;\n  height: 28px;\n  font-weight: var(--scalar-bold);\n  border-radius: 20px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  pointer-events: all;\n}\n.autoSendButton:hover {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-2),\n    var(--scalar-background-1)\n  );\n  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.dark-mode .autoSendButton:hover {\n  background: var(--scalar-background-3);\n}\n.autoSendButton:active {\n  background: var(--scalar-background-2);\n}\n.autoSendButton-enabled,\n.autoSendButton-enabled:hover,\n.dark-mode .autoSendButton-enabled:hover {\n  background: color-mix(in srgb, var(--scalar-color-blue), transparent 90%);\n  color: var(--scalar-color-blue);\n}\n\n.sendButton {\n  background: var(--scalar-agent-blue) !important;\n  color: white;\n  border-radius: 50% !important;\n  margin: 0 !important;\n  pointer-events: all;\n  width: 28px;\n  height: 28px;\n  padding: 6px;\n}\n\n.sendButton[aria-disabled='true'] {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-3);\n}\n\n.contextContainer {\n  display: flex;\n  width: 100%;\n  padding: 10px 12px 12px 12px;\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-font-size-3);\n  user-select: none;\n  justify-content: space-between;\n}\n\n.settingsButton {\n  font-weight: var(--scalar-semibold);\n  border-radius: var(--scalar-radius-lg);\n  padding: 4px 6px;\n  margin: -4px -6px;\n}\n.settingsButton:hover {\n  background: var(--scalar-background-2);\n  box-shadow: 0 0 var(--scalar-border-width) 0 var(--scalar-border-color);\n  cursor: pointer;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_createVNode","_createBlock"],"mappings":"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"}
+{"version":3,"file":"PromptForm.vue2.js","sources":["../../src/views/PromptForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { ScalarIconButton, ScalarLoading } from '@scalar/components'\nimport {\n  ScalarIconArrowUp,\n  ScalarIconLockSimple,\n  ScalarIconPlus,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { MAX_PROMPT_SIZE } from '@scalar-org/entities/agent'\n\nimport ApprovalSection from '@/components/ApprovalSection.vue'\nimport ErrorMessageMessage from '@/components/ErrorMessage.vue'\nimport SearchPopover from '@/components/SearchPopover.vue'\nimport { useChatApprovals } from '@/hooks/useChatApprovals'\nimport { useState } from '@/state/state'\n\nconst emit = defineEmits<{\n  (e: 'submit'): void\n}>()\n\ndefineExpose({ focusPrompt })\n\nconst promptRef = useTemplateRef<HTMLTextAreaElement>('prompt')\n\nconst state = useState()\n\nconst inputHasContent = computed(() => state.prompt.value.trim().length > 0)\nconst promptTooLarge = computed(\n  () => state.prompt.value.trim().length > MAX_PROMPT_SIZE,\n)\n\nwatch(state.prompt, () => {\n  if (!promptRef?.value) return\n\n  if (!state.prompt.value.length) {\n    promptRef.value.style.height = '0px'\n    return\n  }\n\n  promptRef.value.style.height = 'auto'\n  promptRef.value.style.height = promptRef.value.scrollHeight + 'px'\n})\n\nfunction handleSubmit() {\n  if (!inputHasContent.value) return\n\n  emit('submit')\n}\n\nfunction handlePromptKeydown(e: KeyboardEvent) {\n  if (state.loading.value) return\n\n  if (e.key === 'Enter' && !e.shiftKey) {\n    e.preventDefault()\n    handleSubmit()\n    window.scrollTo(0, document.body.scrollHeight)\n  }\n}\n\nfunction focusPrompt() {\n  promptRef.value?.focus()\n}\n\nwatch(\n  () => state.chat.status,\n  (status) => {\n    if (status === 'ready' || status === 'error') promptRef.value?.focus()\n  },\n)\n\nconst { respondToToolCalls, approvalRequestedParts } = useChatApprovals()\n</script>\n\n<template>\n  <ErrorMessageMessage\n    v-if=\"state.chat.error\"\n    :error=\"state.chat.error\" />\n  <ApprovalSection\n    v-if=\"approvalRequestedParts.length\"\n    @approve=\"respondToToolCalls(true)\"\n    @reject=\"respondToToolCalls(false)\" />\n  <div class=\"actionContainer\">\n    <form\n      class=\"promptForm\"\n      @submit.prevent=\"handleSubmit\">\n      <label\n        class=\"agentLabel\"\n        for=\"agentTextarea\">\n        Type a Request To get Started\n      </label>\n      <textarea\n        id=\"agentTextarea\"\n        ref=\"prompt\"\n        v-model=\"state.prompt.value\"\n        class=\"prompt custom-scroll\"\n        :disabled=\"state.loading.value\"\n        name=\"prompt\"\n        placeholder=\"Ask me anything...\"\n        @keydown=\"handlePromptKeydown\" />\n      <div class=\"inputActionsContainer\">\n        <div class=\"inputActionsLeft\">\n          <SearchPopover>\n            <button\n              class=\"addAPIButton\"\n              type=\"button\">\n              <ScalarIconPlus\n                class=\"size-4\"\n                weight=\"bold\" />\n            </button>\n          </SearchPopover>\n          <div\n            v-for=\"document in state.registryDocuments.value\"\n            :key=\"document.id\"\n            class=\"apiPill\">\n            <img\n              v-if=\"document.logoUrl\"\n              class=\"apiPillLogo\"\n              :src=\"document.logoUrl\" />\n            {{ document.title }}\n            <button\n              class=\"apiPillRemove\"\n              type=\"button\"\n              @click=\"state.removeDocument(document)\">\n              <ScalarIconX\n                class=\"size-4\"\n                weight=\"bold\" />\n            </button>\n          </div>\n        </div>\n\n        <div class=\"inputActionsRight\">\n          <ScalarIconButton\n            v-if=\"!state.loading.value\"\n            class=\"settingsButton h-7 w-7 p-1.5\"\n            :icon=\"ScalarIconLockSimple\"\n            label=\"Scalar\"\n            size=\"md\"\n            weight=\"bold\"\n            @click=\"state.settingsModal.show()\" />\n\n          <ScalarIconButton\n            v-if=\"!state.loading.value\"\n            class=\"sendButton h-7 w-7 p-1.5\"\n            :disabled=\"!inputHasContent || promptTooLarge\"\n            :icon=\"ScalarIconArrowUp\"\n            label=\"Scalar\"\n            size=\"md\"\n            type=\"submit\"\n            weight=\"bold\" />\n          <ScalarLoading\n            v-else\n            class=\"loader h-7 w-7\"\n            :loader=\"{\n              isLoading: state.loading.value,\n              isValid: false,\n              clear: async () => {},\n              invalidate: async () => {},\n              isInvalid: false,\n              isActive: false,\n              validate: async () => {},\n              start: () => {},\n            }\"\n            size=\"2xl\" />\n        </div>\n      </div>\n    </form>\n  </div>\n</template>\n\n<style scoped>\n.actionContainer {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-2),\n    var(--scalar-background-1)\n  );\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 16px;\n  width: 100%;\n  /* visually hides overflowing text below */\n  box-shadow: 0 50px 0 2px var(--scalar-background-1);\n}\n.promptForm {\n  width: 100%;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--scalar-background-1);\n  box-shadow: var(--scalar-shadow-1);\n  border-radius: 16px;\n}\n\n.inputActionsContainer {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 8px 8px 8px;\n}\n\n.inputActionsLeft {\n  display: flex;\n  flex-wrap: wrap; /* key: allows pills to go to next line */\n  align-items: center;\n  gap: 5px; /* spacing between pills */\n}\n\n.inputActionsRight {\n  display: flex;\n  gap: 5px;\n}\n\n.apiPill {\n  font-size: var(--scalar-font-size-3);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  height: 28px;\n  align-items: center;\n  display: flex;\n  border-radius: 16px;\n  padding: 0 8px;\n  pointer-events: all;\n  z-index: 1;\n  gap: 4px;\n}\n.apiPillLogo {\n  width: 15px;\n}\n\n.apiPillRemove {\n  width: 24px;\n  height: 24px;\n  margin-right: -6px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.apiPill:hover .apiPillRemove {\n  background: var(--scalar-background-2);\n}\n.dark-mode .apiPill:hover .apiPillRemove {\n  background: var(--scalar-background-3);\n}\n\n.apiPillRemove:hover {\n  color: var(--scalar-color-1);\n}\n\n.prompt {\n  width: 100%;\n  outline: none;\n  border: none;\n  resize: none;\n  field-sizing: content;\n  min-height: 64px;\n  z-index: 1;\n  max-height: 250px;\n  max-width: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  word-wrap: break-word;\n  font-family: var(--scalar-font);\n  font-size: 16px;\n  padding: 12px 12px 14px 12px;\n}\n.dark-mode .promptForm {\n  background: var(--scalar-background-2);\n}\n\n.prompt:disabled {\n  color: var(--scalar-color-3);\n}\n\n.addAPIButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-font-size-3);\n  height: 28px;\n  width: 28px;\n  font-weight: var(--scalar-bold);\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  pointer-events: all;\n  z-index: 1;\n  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.addAPIButton:hover {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-2),\n    var(--scalar-background-1)\n  );\n  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.dark-mode .addAPIButton:hover {\n  background: var(--scalar-background-3);\n}\n\n.settingsButton {\n  color: var(--scalar-color-3) !important;\n  color: white;\n  border-radius: 50% !important;\n  margin: 0 !important;\n  z-index: 1;\n}\n.settingsButton[aria-disabled='true'] {\n  background: var(--scalar-background-2);\n}\n.dark-mode .settingsButton:hover {\n  background: var(--scalar-background-3);\n}\n\n.sendButton {\n  background: var(--scalar-agent-blue) !important;\n  color: white;\n  border-radius: 50% !important;\n  margin: 0 !important;\n  z-index: 1;\n}\n.sendButton:not([aria-disabled='true']):hover {\n  color: white !important;\n}\n\n.sendButton[aria-disabled='true'] {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-3);\n}\n\n.dark-mode .sendButton[aria-disabled='true'] {\n  background: var(--scalar-background-3) !important;\n}\n.contextContainer {\n  display: flex;\n  width: 100%;\n  padding: 10px 12px 12px 12px;\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-font-size-3);\n  user-select: none;\n  justify-content: space-between;\n}\n\n.settingsButton {\n  font-weight: var(--scalar-semibold);\n  border-radius: var(--scalar-radius-lg);\n  padding: 4px 6px;\n  margin: -4px -6px;\n}\n.settingsButton:hover {\n  background: var(--scalar-background-2);\n  box-shadow: 0 0 var(--scalar-border-width) 0 var(--scalar-border-color);\n  cursor: pointer;\n}\n\n.agentLabel {\n  font-size: 0px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: text;\n}\n</style>\n"],"names":["_unref","_createBlock","_createElementVNode","_createVNode","_openBlock","_createElementBlock","_Fragment","document","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/views/{Auth.vue.d.ts → Settings/Auth.vue.d.ts}

@@ -6,6 +6,7 @@ import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/o
 import type { WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace';
 type __VLS_Props = {
     options: Pick<ApiReferenceConfigurationRaw, 'authentication' | 'persistAuth' | 'proxyUrl'>;
+    name: string;
     document: WorkspaceDocument | undefined;
     eventBus: WorkspaceEventBus;
     securitySchemes: MergedSecuritySchemes;

package/dist/views/Settings/Auth.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/Auth.vue"],"names":[],"mappings":"AA0FA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,yDAAyD,CAAA;AAKhE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AAC/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAChG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAMlF,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,IAAI,CACX,4BAA4B,EAC5B,gBAAgB,GAAG,aAAa,GAAG,UAAU,CAC9C,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAA;IACvC,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,eAAe,EAAE,qBAAqB,CAAA;IACtC,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;;AA2GJ,wBAEG"}

package/dist/views/{Auth.vue.js → Settings/Auth.vue.js}

@@ -1,11 +1,13 @@
 import { defineComponent, computed, watch, createBlock, createCommentVNode, openBlock, unref } from "vue";
 import { AuthSelector } from "@scalar/api-client/v2/blocks/scalar-auth-selector-block";
 import { getSecurityRequirements, getSelectedSecurity } from "@scalar/api-client/v2/features/operation";
-import { getDefaultSecurity } from "../helpers.js";
+import { useState } from "../../state/state.js";
+import { authStorage, restoreAuthSecretsFromStorage } from "../../helpers.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Auth",
   props: {
     options: {},
+    name: {},
     document: {},
     eventBus: {},
     securitySchemes: {},
@@ -13,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     environment: {}
   },
   setup(__props) {
+    const { workspaceStore } = useState();
     const securityRequirements = computed(
       () => getSecurityRequirements(__props.document?.security)
     );
@@ -24,42 +27,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       )
     );
     watch(
-      () => __props.document?.["x-scalar-selected-security"],
-      (documentSelectedSecurity) => {
-        if (typeof documentSelectedSecurity !== "undefined") {
-          return;
+      [() => selectedSecurity, () => __props.securitySchemes],
+      () => {
+        const authPersistence = authStorage();
+        authPersistence.setSchemas(__props.name, __props.securitySchemes);
+        if (selectedSecurity.value) {
+          authPersistence.setSelectedSchemes(__props.name, {
+            "x-scalar-selected-security": selectedSecurity.value
+          });
         }
-        const defaultSecurity = getDefaultSecurity(
-          securityRequirements.value,
-          __props.options.authentication?.preferredSecurityScheme,
-          __props.securitySchemes
-        );
-        if (!defaultSecurity) {
-          return;
-        }
-        __props.eventBus.emit("auth:update:selected-security-schemes", {
-          selectedRequirements: [defaultSecurity],
-          newSchemes: [],
-          meta: { type: "document" }
-        });
+        restoreAuthSecretsFromStorage({ documentName: __props.name, workspaceStore });
       },
-      { immediate: true }
+      { deep: true }
     );
     return (_ctx, _cache) => {
-      return Object.keys(_ctx.securitySchemes).length ? (openBlock(), createBlock(unref(AuthSelector), {
+      return Object.keys(__props.securitySchemes).length ? (openBlock(), createBlock(unref(AuthSelector), {
         key: 0,
-        environment: _ctx.environment,
-        eventBus: _ctx.eventBus,
+        environment: __props.environment,
+        eventBus: __props.eventBus,
         isReadOnly: "",
         isStatic: "",
         layout: "reference",
         meta: { type: "document" },
-        persistAuth: _ctx.options.persistAuth,
-        proxyUrl: _ctx.options.proxyUrl ?? "",
+        persistAuth: __props.options.persistAuth,
+        proxyUrl: __props.options.proxyUrl ?? "",
         securityRequirements: securityRequirements.value,
-        securitySchemes: _ctx.securitySchemes,
+        securitySchemes: __props.securitySchemes,
         selectedSecurity: selectedSecurity.value,
-        server: _ctx.selectedServer,
+        server: __props.selectedServer,
         title: "Authentication"
       }, null, 8, ["environment", "eventBus", "persistAuth", "proxyUrl", "securityRequirements", "securitySchemes", "selectedSecurity", "server"])) : createCommentVNode("", true);
     };

package/dist/views/Settings/Auth.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth.vue.js","sources":["../../../src/views/Settings/Auth.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from 'vue'\n\nimport {\n  AuthSelector,\n  type MergedSecuritySchemes,\n} from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport {\n  getSecurityRequirements,\n  getSelectedSecurity,\n} from '@scalar/api-client/v2/features/operation'\nimport type { ApiReferenceConfigurationRaw } from '@scalar/types/api-reference'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace'\n\nimport { useState } from '@/state/state'\n\nimport { authStorage, restoreAuthSecretsFromStorage } from '../../helpers'\n\nconst { document, name, environment, eventBus, options, securitySchemes } =\n  defineProps<{\n    options: Pick<\n      ApiReferenceConfigurationRaw,\n      'authentication' | 'persistAuth' | 'proxyUrl'\n    >\n    name: string\n    document: WorkspaceDocument | undefined\n    eventBus: WorkspaceEventBus\n    securitySchemes: MergedSecuritySchemes\n    selectedServer: ServerObject | null\n    environment: XScalarEnvironment\n  }>()\n\nconst { workspaceStore } = useState()\n\n/** Compute what the security requirements should be for the document */\nconst securityRequirements = computed(() =>\n  getSecurityRequirements(document?.security),\n)\n\n/** The selected security keys for the document */\nconst selectedSecurity = computed(() =>\n  getSelectedSecurity(\n    document?.['x-scalar-selected-security'],\n    undefined,\n    securityRequirements.value,\n  ),\n)\n\nwatch(\n  [() => selectedSecurity, () => securitySchemes],\n  () => {\n    const authPersistence = authStorage()\n\n    authPersistence.setSchemas(name, securitySchemes)\n\n    if (selectedSecurity.value) {\n      authPersistence.setSelectedSchemes(name, {\n        'x-scalar-selected-security': selectedSecurity.value,\n      })\n    }\n\n    restoreAuthSecretsFromStorage({ documentName: name, workspaceStore })\n  },\n  { deep: true },\n)\n</script>\n<template>\n  <AuthSelector\n    v-if=\"Object.keys(securitySchemes).length\"\n    :environment\n    :eventBus\n    isReadOnly\n    isStatic\n    layout=\"reference\"\n    :meta=\"{ type: 'document' }\"\n    :persistAuth=\"options.persistAuth\"\n    :proxyUrl=\"options.proxyUrl ?? ''\"\n    :securityRequirements\n    :securitySchemes\n    :selectedSecurity\n    :server=\"selectedServer\"\n    title=\"Authentication\" />\n</template>\n"],"names":["_createBlock","_unref"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,UAAM,EAAE,eAAA,IAAmB,SAAA;AAG3B,UAAM,uBAAuB;AAAA,MAAS,MACpC,wBAAwB,kBAAU,QAAQ;AAAA,IAAA;AAI5C,UAAM,mBAAmB;AAAA,MAAS,MAChC;AAAA,QACE,QAAA,WAAW,4BAA4B;AAAA,QACvC;AAAA,QACA,qBAAqB;AAAA,MAAA;AAAA,IACvB;AAGF;AAAA,MACE,CAAC,MAAM,kBAAkB,MAAM,uBAAe;AAAA,MAC9C,MAAM;AACJ,cAAM,kBAAkB,YAAA;AAExB,wBAAgB,WAAW,QAAA,MAAM,QAAA,eAAe;AAEhD,YAAI,iBAAiB,OAAO;AAC1B,0BAAgB,mBAAmB,QAAA,MAAM;AAAA,YACvC,8BAA8B,iBAAiB;AAAA,UAAA,CAChD;AAAA,QACH;AAEA,sCAA8B,EAAE,cAAc,QAAA,MAAM,gBAAgB;AAAA,MACtE;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;;AAKL,aAAA,OAAO,KAAK,QAAA,eAAe,EAAE,uBADrCA,YAc2BC,MAAA,YAAA,GAAA;AAAA;QAZxB,aAAA,QAAA;AAAA,QACA,UAAA,QAAA;AAAA,QACD,YAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAO;AAAA,QACN,MAAM,EAAA,MAAA,WAAA;AAAA,QACN,aAAa,QAAA,QAAQ;AAAA,QACrB,UAAU,QAAA,QAAQ,YAAQ;AAAA,QAC1B,sBAAA,qBAAA;AAAA,QACA,iBAAA,QAAA;AAAA,QACA,kBAAA,iBAAA;AAAA,QACA,QAAQ,QAAA;AAAA,QACT,OAAM;AAAA,MAAA;;;;"}

package/dist/views/Settings/DocSettings.vue.d.ts

@@ -0,0 +1,8 @@
+import { type WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace';
+type __VLS_Props = {
+    document: WorkspaceDocument;
+    name: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=DocSettings.vue.d.ts.map

package/dist/views/Settings/DocSettings.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocSettings.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/DocSettings.vue"],"names":[],"mappings":"AAwEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAKlF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;CACb,CAAC;;AAmGF,wBAEG"}

package/dist/views/Settings/DocSettings.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./DocSettings.vue2.js";
+/* empty css                 */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const DocSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e19eeee"]]);
+export {
+  DocSettings as default
+};
+//# sourceMappingURL=DocSettings.vue.js.map

package/dist/views/Settings/DocSettings.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocSettings.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/views/Settings/DocSettings.vue2.js

@@ -0,0 +1,50 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref } from "vue";
+import { getSelectedServer } from "@scalar/api-client/v2/features/operation";
+import { getActiveEnvironment } from "@scalar/api-client/v2/helpers";
+import { ServerSelector } from "@scalar/api-reference/blocks";
+import { useState } from "../../state/state.js";
+import _sfc_main$1 from "./Auth.vue.js";
+const _hoisted_1 = { class: "docSettings" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DocSettings",
+  props: {
+    document: {},
+    name: {}
+  },
+  setup(__props) {
+    const { workspaceStore, config, eventBus } = useState();
+    const environment = computed(
+      () => getActiveEnvironment(workspaceStore, __props.document)
+    );
+    const selectedServer = computed(() => getSelectedServer(__props.document));
+    const securitySchemes = computed(
+      () => __props.document.components?.securitySchemes ?? {}
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", null, [
+          createVNode(unref(ServerSelector), {
+            eventBus: unref(eventBus),
+            selectedServer: selectedServer.value,
+            servers: __props.document.servers ?? []
+          }, null, 8, ["eventBus", "selectedServer", "servers"])
+        ]),
+        createElementVNode("div", null, [
+          createVNode(_sfc_main$1, {
+            document: __props.document,
+            environment: environment.value,
+            eventBus: unref(eventBus),
+            name: __props.name,
+            options: unref(config),
+            securitySchemes: securitySchemes.value,
+            selectedServer: selectedServer.value
+          }, null, 8, ["document", "environment", "eventBus", "name", "options", "securitySchemes", "selectedServer"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=DocSettings.vue2.js.map

package/dist/views/Settings/DocSettings.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocSettings.vue2.js","sources":["../../../src/views/Settings/DocSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { getSelectedServer } from '@scalar/api-client/v2/features/operation'\nimport { getActiveEnvironment } from '@scalar/api-client/v2/helpers'\nimport { ServerSelector } from '@scalar/api-reference/blocks'\nimport { type WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace'\n\nimport { useState } from '@/state/state'\nimport Auth from '@/views/Settings/Auth.vue'\n\nconst { document, name } = defineProps<{\n  document: WorkspaceDocument\n  name: string\n}>()\n\nconst { workspaceStore, config, eventBus } = useState()\n\nconst environment = computed(() =>\n  getActiveEnvironment(workspaceStore, document),\n)\n\nconst selectedServer = computed(() => getSelectedServer(document))\n\nconst securitySchemes = computed(\n  () => document.components?.securitySchemes ?? {},\n)\n</script>\n\n<template>\n  <div class=\"docSettings\">\n    <div>\n      <ServerSelector\n        :eventBus\n        :selectedServer\n        :servers=\"document.servers ?? []\" />\n    </div>\n    <div>\n      <Auth\n        :document\n        :environment\n        :eventBus\n        :name\n        :options=\"config\"\n        :securitySchemes\n        :selectedServer />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.docSettings {\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-size: var(--scalar-font-size-3);\n  max-height: 600px;\n  overflow-y: scroll;\n}\n\n.documentName {\n  font-weight: var(--font-weight-bold);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","Auth"],"mappings":";;;;;;;;;;;;;;AAgBA,UAAM,EAAE,gBAAgB,QAAQ,SAAA,IAAa,SAAA;AAE7C,UAAM,cAAc;AAAA,MAAS,MAC3B,qBAAqB,gBAAgB,gBAAQ;AAAA,IAAA;AAG/C,UAAM,iBAAiB,SAAS,MAAM,kBAAkB,QAAA,QAAQ,CAAC;AAEjE,UAAM,kBAAkB;AAAA,MACtB,MAAM,QAAA,SAAS,YAAY,mBAAmB,CAAA;AAAA,IAAC;;AAK/C,aAAAA,UAAA,GAAAC,mBAiBM,OAjBN,YAiBM;AAAA,QAhBJC,mBAKM,OAAA,MAAA;AAAA,UAJJC,YAGsCC,MAAA,cAAA,GAAA;AAAA,YAFnC,UAAAA,MAAA,QAAA;AAAA,YACA,gBAAA,eAAA;AAAA,YACA,SAAS,QAAA,SAAS,WAAO,CAAA;AAAA,UAAA;;QAE9BF,mBASM,OAAA,MAAA;AAAA,UARJC,YAOoBE,aAAA;AAAA,YANjB,UAAA,QAAA;AAAA,YACA,aAAA,YAAA;AAAA,YACA,UAAAD,MAAA,QAAA;AAAA,YACA,MAAA,QAAA;AAAA,YACA,SAASA,MAAA,MAAA;AAAA,YACT,iBAAA,gBAAA;AAAA,YACA,gBAAA,eAAA;AAAA,UAAA;;;;;;"}

package/dist/views/Settings/Settings.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/Settings.vue"],"names":[],"mappings":"AAwIA,OAAO,EACL,KAAK,UAAU,EAIhB,MAAM,oBAAoB,CAAA;AAM3B,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,UAAU,CAAA;CACvB,CAAC;;AAoMF,wBAEG"}

package/dist/views/{Settings.vue.js → Settings/Settings.vue.js}

@@ -1,8 +1,8 @@
 import _sfc_main from "./Settings.vue2.js";
 /* empty css              */
 /* empty css              */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const Settings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-87a83fbb"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const Settings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e1a5892c"]]);
 export {
   Settings as default
 };

package/dist/views/Settings/Settings.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementVNode, createVNode, createElementBlock, Fragment, renderList, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, isRef } from "vue";
+import { ScalarModal, ScalarColorModeToggle, ScalarTextInput } from "@scalar/components";
+import { ScalarIconCaretDown, ScalarIconCaretRight } from "@scalar/icons";
+import { useState } from "../../state/state.js";
+import DocSettings from "./DocSettings.vue.js";
+const _hoisted_1 = { class: "settingsHeading" };
+const _hoisted_2 = { class: "documentList" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = {
+  key: 1,
+  class: "noDocuments"
+};
+const _hoisted_6 = { class: "proxyUrlContainer" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Settings",
+  props: {
+    modalState: {}
+  },
+  setup(__props) {
+    const { workspaceStore, proxyUrl } = useState();
+    function selectDocument(name) {
+      workspaceStore.update("x-scalar-active-document", name);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ScalarModal), { state: __props.modalState }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            _cache[1] || (_cache[1] = createElementVNode("h1", null, "Settings", -1)),
+            createVNode(unref(ScalarColorModeToggle), { class: "colorToggle ml-auto" })
+          ]),
+          createElementVNode("div", _hoisted_2, [
+            _cache[2] || (_cache[2] = createElementVNode("label", null, " APIs ", -1)),
+            Object.entries(unref(workspaceStore).workspace.documents).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(Object.entries(
+              unref(workspaceStore).workspace.documents
+            ), ([name, document]) => {
+              return openBlock(), createElementBlock("div", {
+                key: name,
+                class: "document"
+              }, [
+                createElementVNode("button", {
+                  class: normalizeClass(["documentName", {
+                    documentNameActive: unref(workspaceStore).workspace.activeDocument === document
+                  }]),
+                  type: "button",
+                  onClick: ($event) => selectDocument(name)
+                }, [
+                  unref(workspaceStore).workspace.activeDocument === document ? (openBlock(), createBlock(unref(ScalarIconCaretDown), { key: 0 })) : (openBlock(), createBlock(unref(ScalarIconCaretRight), { key: 1 })),
+                  createTextVNode(" @" + toDisplayString(name), 1)
+                ], 10, _hoisted_3),
+                unref(workspaceStore).workspace.activeDocument === document ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createVNode(DocSettings, {
+                    document,
+                    name
+                  }, null, 8, ["document", "name"])
+                ])) : createCommentVNode("", true)
+              ]);
+            }), 128)) : (openBlock(), createElementBlock("div", _hoisted_5, " No APIs selected. Use + to add context. "))
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            _cache[3] || (_cache[3] = createElementVNode("label", { for: "proxyUrl" }, "Proxy URL", -1)),
+            createVNode(unref(ScalarTextInput), {
+              id: "proxyUrl",
+              modelValue: unref(proxyUrl),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(proxyUrl) ? proxyUrl.value = $event : null),
+              placeholder: "https://proxy.scalar.com"
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["state"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Settings.vue2.js.map

package/dist/views/Settings/Settings.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.vue2.js","sources":["../../../src/views/Settings/Settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  type ModalState,\n  ScalarColorModeToggle,\n  ScalarModal,\n  ScalarTextInput,\n} from '@scalar/components'\nimport { ScalarIconCaretDown, ScalarIconCaretRight } from '@scalar/icons'\n\nimport { useState } from '@/state/state'\nimport DocSettings from '@/views/Settings/DocSettings.vue'\n\nconst { modalState } = defineProps<{\n  modalState: ModalState\n}>()\n\nconst { workspaceStore, proxyUrl } = useState()\n\nfunction selectDocument(name: string) {\n  workspaceStore.update('x-scalar-active-document', name)\n}\n</script>\n\n<template>\n  <ScalarModal :state=\"modalState\">\n    <div class=\"settingsHeading\">\n      <h1>Settings</h1>\n      <ScalarColorModeToggle class=\"colorToggle ml-auto\" />\n    </div>\n    <div class=\"documentList\">\n      <label> APIs </label>\n\n      <template\n        v-if=\"Object.entries(workspaceStore.workspace.documents).length\">\n        <div\n          v-for=\"[name, document] of Object.entries(\n            workspaceStore.workspace.documents,\n          )\"\n          :key=\"name\"\n          class=\"document\">\n          <button\n            class=\"documentName\"\n            :class=\"{\n              documentNameActive:\n                workspaceStore.workspace.activeDocument === document,\n            }\"\n            type=\"button\"\n            @click=\"selectDocument(name)\">\n            <ScalarIconCaretDown\n              v-if=\"workspaceStore.workspace.activeDocument === document\" />\n            <ScalarIconCaretRight v-else />\n            @{{ name }}\n          </button>\n          <div v-if=\"workspaceStore.workspace.activeDocument === document\">\n            <DocSettings\n              :document\n              :name />\n          </div>\n        </div>\n      </template>\n      <div\n        v-else\n        class=\"noDocuments\">\n        No APIs selected. Use + to add context.\n      </div>\n    </div>\n\n    <div class=\"proxyUrlContainer\">\n      <label for=\"proxyUrl\">Proxy URL</label>\n      <ScalarTextInput\n        id=\"proxyUrl\"\n        v-model=\"proxyUrl\"\n        placeholder=\"https://proxy.scalar.com\" />\n    </div>\n  </ScalarModal>\n</template>\n\n<style>\n.scalar-modal-layout {\n  z-index: 1000 !important;\n}\n</style>\n\n<style scoped>\n.documentList {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  margin-bottom: 10px;\n  font-size: var(--scalar-font-size-3);\n}\n\n.document {\n  display: flex;\n  flex-direction: column;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-xl);\n}\n\n.documentName {\n  background: var(--scalar-background-2);\n  padding: 5px 10px;\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-3);\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: var(--scalar-font-size-3);\n}\n\n.documentNameActive {\n  color: var(--scalar-color-1);\n}\n\n.settingsHeading {\n  font-size: 19px;\n  margin-bottom: 15px;\n  display: flex;\n  gap: 5px;\n  align-items: center;\n}\n\n.proxyUrlContainer {\n  font-size: var(--scalar-font-size-3);\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n}\n\n.noDocuments {\n  color: var(--scalar-color-2);\n  margin-bottom: 10px;\n}\n</style>\n"],"names":["_createBlock","_unref","_createElementVNode","_createVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,EAAE,gBAAgB,SAAA,IAAa,SAAA;AAErC,aAAS,eAAe,MAAc;AACpC,qBAAe,OAAO,4BAA4B,IAAI;AAAA,IACxD;;0BAIEA,YAkDcC,MAAA,WAAA,GAAA,EAlDA,OAAO,QAAA,cAAU;AAAA,yBAC7B,MAGM;AAAA,UAHNC,mBAGM,OAHN,YAGM;AAAA,YAFJ,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAA,mBAAiB,YAAb,YAAQ,EAAA;AAAA,YACZC,YAAqDF,MAAA,qBAAA,GAAA,EAA9B,OAAM,uBAAqB;AAAA,UAAA;UAEpDC,mBAoCM,OApCN,YAoCM;AAAA,YAnCJ,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAA,mBAAqB,eAAd,UAAM,EAAA;AAAA,YAGL,OAAO,QAAQD,MAAA,cAAA,EAAe,UAAU,SAAS,EAAE,2BACzDG,mBAwBMC,UAAA,EAAA,KAAA,KAAAC,WAvBuB,OAAO;AAAA,cAAqBL,MAAA,cAAA,EAAe,UAAU;AAAA,YAAA,GAAxE,CAAA,CAAA,MAAM,QAAQ,MAAA;kCADxBG,mBAwBM,OAAA;AAAA,gBApBH,KAAK;AAAA,gBACN,OAAM;AAAA,cAAA;gBACNF,mBAYS,UAAA;AAAA,kBAXP,uBAAM,gBAAc;AAAA,wCACwCD,MAAA,cAAA,EAAe,UAAU,mBAAmB;AAAA,kBAAA;kBAIxG,MAAK;AAAA,kBACJ,SAAK,CAAA,WAAE,eAAe,IAAI;AAAA,gBAAA;kBAEnBA,MAAA,cAAA,EAAe,UAAU,mBAAmB,yBADpDD,YACgEC,MAAA,mBAAA,GAAA,EAAA,KAAA,GAAA,mBAChED,YAA+BC,MAAA,oBAAA,GAAA,EAAA,KAAA,EAAA,CAAA;AAAA,kBAAAM,gBAAA,uBAC3B,IAAI,GAAA,CAAA;AAAA,gBAAA;gBAECN,MAAA,cAAA,EAAe,UAAU,mBAAmB,yBAAvDG,mBAIM,OAAA,YAAA;AAAA,kBAHJD,YAEU,aAAA;AAAA,oBADP;AAAA,oBACA;AAAA,kBAAA;;;sCAITC,mBAIM,OAJN,YAEsB,2CAEtB;AAAA,UAAA;UAGFF,mBAMM,OANN,YAMM;AAAA,YALJ,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAA,mBAAuC,SAAA,EAAhC,KAAI,WAAA,GAAW,aAAS,EAAA;AAAA,YAC/BC,YAG2CF,MAAA,eAAA,GAAA;AAAA,cAFzC,IAAG;AAAA,0BACMA,MAAA,QAAA;AAAA,6FAAA,SAAQ,QAAA,SAAA;AAAA,cACjB,aAAY;AAAA,YAAA;;;;;;;;"}

package/dist/views/Start.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Start.vue.d.ts","sourceRoot":"","sources":["../../src/views/Start.vue"],"names":[],"mappings":";;;;;AAiRA,wBAEG"}
+{"version":3,"file":"Start.vue.d.ts","sourceRoot":"","sources":["../../src/views/Start.vue"],"names":[],"mappings":";;;;;AA8QA,wBAEG"}

package/dist/views/Start.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./Start.vue2.js";
 /* empty css           */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const Start = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-824d38a8"]]);
+const Start = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0334ed64"]]);
 export {
   Start as default
 };

package/dist/views/Start.vue2.js

@@ -16,7 +16,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _cache[4] || (_cache[4] = createElementVNode("h1", { class: "heading" }, "How can I help you today?", -1)),
         createVNode(PromptForm, {
           ref: "promptRef",
-          loading: false,
           onSubmit: _cache[0] || (_cache[0] = ($event) => emit("submit"))
         }, null, 512),
         createElementVNode("div", _hoisted_2, [