@scalar/agent-chat 0.12.42 → 0.12.43

package/dist/style.css

@@ -11,7 +11,6 @@
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
-      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -47,6 +46,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
       --tw-mask-linear: linear-gradient(#fff, #fff);
       --tw-mask-radial: linear-gradient(#fff, #fff);
       --tw-mask-conic: linear-gradient(#fff, #fff);
@@ -1196,10 +1196,9 @@
 
 :where(body, dialog) > .scalar-tooltip:before {
   content: "";
+  border: var(--scalar-border-width) solid var(--scalar-border-color);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius-lg);
-  border-style: var(--tw-border-style);
-  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
   --tw-shadow: var(--scalar-shadow-1);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1231,12 +1230,6 @@
   inherits: false
 }
 
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -1875,45 +1868,45 @@
   }
 }
 
-[data-v-e29008b7] .code-input-lite__editor {
+[data-v-344240b0] .code-input-lite__editor {
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   background-color: #0000;
   padding: 5px 8px;
 }
 
-[data-v-e29008b7] .scalar-pill:not(:last-of-type) {
+[data-v-344240b0] .scalar-pill:not(:last-of-type) {
   margin-right: .15em;
 }
 
-[data-v-e29008b7] .scalar-pill:not(:first-of-type) {
+[data-v-344240b0] .scalar-pill:not(:first-of-type) {
   margin-left: .5px;
 }
 
-[data-v-65cf6606] .cm-content {
+[data-v-ec7e5b86] .cm-content {
   font-size: var(--scalar-small);
 }
 
-[data-v-ce270af2] .code-input-lite__editor {
+[data-v-029a43f5] .code-input-lite__editor {
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   background-color: #0000;
   padding: 5px 8px;
 }
 
-[data-v-ce270af2] .scalar-pill:not(:last-of-type) {
+[data-v-029a43f5] .scalar-pill:not(:last-of-type) {
   margin-right: .15em;
 }
 
-[data-v-ce270af2] .scalar-pill:not(:first-of-type) {
+[data-v-029a43f5] .scalar-pill:not(:first-of-type) {
   margin-left: .5px;
 }
 
-input[data-v-ce270af2]::placeholder {
+input[data-v-029a43f5]::placeholder {
   color: var(--scalar-color-3);
 }
 
-.scalar-password-input[data-v-ce270af2] {
+.scalar-password-input[data-v-029a43f5] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -1950,38 +1943,38 @@ input[data-v-ce270af2]::placeholder {
   scrollbar-width: none;
 }
 
-.request-section-content[data-v-5bf07c90] {
+.request-section-content[data-v-a55ce987] {
   --scalar-border-width: .5px;
 }
 
-.request-section-content-filter[data-v-5bf07c90] {
+.request-section-content-filter[data-v-a55ce987] {
   box-shadow: 0 -10px 0 10px var(--scalar-background-1);
 }
 
-.request-item:focus-within .request-meta-buttons[data-v-5bf07c90] {
+.request-item:focus-within .request-meta-buttons[data-v-a55ce987] {
   opacity: 1;
 }
 
-.group-hover-input[data-v-5bf07c90] {
+.group-hover-input[data-v-a55ce987] {
   border-width: var(--scalar-border-width);
   border-color: #0000;
 }
 
-.group:hover .group-hover-input[data-v-5bf07c90] {
+.group:hover .group-hover-input[data-v-a55ce987] {
   background: var(--scalar-background-1);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  .group:hover .group-hover-input[data-v-5bf07c90] {
+  .group:hover .group-hover-input[data-v-a55ce987] {
     background: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
   }
 }
 
-.group:hover .group-hover-input[data-v-5bf07c90] {
+.group:hover .group-hover-input[data-v-a55ce987] {
   border-color: var(--scalar-border-color);
 }
 
-.group-hover-input[data-v-5bf07c90]:focus {
+.group-hover-input[data-v-a55ce987]:focus {
   border-color: var(--scalar-border-color) !important;
   background: none !important;
 }
@@ -4452,6 +4445,12 @@ input[data-v-ce270af2]::placeholder {
   initial-value: 0;
 }
 
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-mask-linear {
   syntax: "*";
   inherits: false;
@@ -4916,37 +4915,37 @@ input[data-v-ce270af2]::placeholder {
 }
 }
 
-.requestHeaderContainer[data-v-1e1f4549] {
+.requestHeaderContainer[data-v-e049f4c9] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 5px;
 }
-.requestPreview[data-v-1e1f4549] {
+.requestPreview[data-v-e049f4c9] {
   border-radius: var(--scalar-radius-2xl);
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
 }
-.requestContent[data-v-1e1f4549] {
+.requestContent[data-v-e049f4c9] {
   display: grid;
   grid-template-rows: 0fr;
   min-height: 0;
   overflow: hidden;
   transition: grid-template-rows 0.2s ease-out;
 }
-.requestPreview.open .requestContent[data-v-1e1f4549] {
+.requestPreview.open .requestContent[data-v-e049f4c9] {
   grid-template-rows: 1fr;
 }
-.requestPreview.succeeded[data-v-1e1f4549] {
+.requestPreview.succeeded[data-v-e049f4c9] {
   padding: 0;
 }
-.requestContentInner[data-v-1e1f4549] {
+.requestContentInner[data-v-e049f4c9] {
   min-height: 0;
   overflow: hidden;
 }
-.code[data-v-1e1f4549] {
+.code[data-v-e049f4c9] {
   display: flex;
   flex-direction: column;
   font-size: var(--scalar-font-size-4);
@@ -4959,34 +4958,34 @@ input[data-v-ce270af2]::placeholder {
   overflow: hidden;
   margin-bottom: 12px;
 }
-.dark-mode .code[data-v-1e1f4549] {
+.dark-mode .code[data-v-e049f4c9] {
   background: var(--scalar-background-2);
 }
-.code h1[data-v-1e1f4549] {
+.code h1[data-v-e049f4c9] {
   font-size: var(--scalar-font-size-3);
   color: var(--scalar-color-3);
   padding: 8px;
 }
-.code[data-v-1e1f4549] .codeBlock {
+.code[data-v-e049f4c9] .codeBlock {
   max-height: calc(50vh - 100px);
   padding-top: 0;
 }
-.autosendContainer[data-v-1e1f4549] {
+.autosendContainer[data-v-e049f4c9] {
   display: flex;
   justify-content: space-between;
 }
-.sendButton[data-v-1e1f4549] {
+.sendButton[data-v-e049f4c9] {
   background: var(--scalar-color-blue);
   color: white;
   font-weight: var(--scalar-semibold);
   padding: 5px 10px;
 }
-.sendButton[data-v-1e1f4549]:hover,
-.sendButton[data-v-1e1f4549]:active {
+.sendButton[data-v-e049f4c9]:hover,
+.sendButton[data-v-e049f4c9]:active {
   background: color-mix(in srgb, var(--scalar-color-blue), black 10%);
   color: white !important;
 }
-.toggleButton[data-v-1e1f4549] {
+.toggleButton[data-v-e049f4c9] {
   background: none;
   border: none;
   cursor: pointer;
@@ -4998,7 +4997,7 @@ input[data-v-ce270af2]::placeholder {
   justify-content: space-between;
   border-radius: var(--scalar-radius-lg);
 }
-.toggleButton[data-v-1e1f4549]:hover {
+.toggleButton[data-v-e049f4c9]:hover {
   text-decoration: underline;
 }
 
@@ -5571,7 +5570,7 @@ input[data-v-ce270af2]::placeholder {
   width: 20px;
 }
 
-.actionContainer[data-v-ba1161a7] {
+.actionContainer[data-v-3a0f1d21] {
   background: color-mix(
     in srgb,
     var(--scalar-background-2),
@@ -5584,7 +5583,7 @@ input[data-v-ce270af2]::placeholder {
   /* visually hides overflowing text below */
   box-shadow: 0 24px 0 2px var(--scalar-background-1);
 }
-.promptForm[data-v-ba1161a7] {
+.promptForm[data-v-3a0f1d21] {
   width: 100%;
   position: relative;
   display: flex;
@@ -5595,23 +5594,23 @@ input[data-v-ce270af2]::placeholder {
     0 0 0 var(--scalar-border-width) var(--scalar-border-color);
   border-radius: var(--scalar-radius-3xl);
 }
-.inputActionsContainer[data-v-ba1161a7] {
+.inputActionsContainer[data-v-3a0f1d21] {
   display: flex;
   justify-content: space-between;
   padding: 0 8px 8px 8px;
 }
-.inputActionsLeft[data-v-ba1161a7] {
+.inputActionsLeft[data-v-3a0f1d21] {
   display: flex;
   flex-wrap: wrap; /* key: allows pills to go to next line */
   align-items: center;
   gap: 5px; /* spacing between pills */
 }
-.inputActionsRight[data-v-ba1161a7] {
+.inputActionsRight[data-v-3a0f1d21] {
   display: flex;
   gap: 5px;
   position: relative;
 }
-.apiPill[data-v-ba1161a7] {
+.apiPill[data-v-3a0f1d21] {
   font-size: var(--scalar-font-size-3);
   border: var(--scalar-border-width) solid var(--scalar-border-color);
   color: var(--scalar-color-2);
@@ -5626,10 +5625,10 @@ input[data-v-ce270af2]::placeholder {
   gap: 4px;
   user-select: none;
 }
-.apiPillLogo[data-v-ba1161a7] {
+.apiPillLogo[data-v-3a0f1d21] {
   width: 15px;
 }
-.apiPillRemove[data-v-ba1161a7] {
+.apiPillRemove[data-v-3a0f1d21] {
   width: 24px;
   height: 24px;
   margin-right: -6px;
@@ -5638,16 +5637,16 @@ input[data-v-ce270af2]::placeholder {
   align-items: center;
   justify-content: center;
 }
-.apiPill:hover .apiPillRemove[data-v-ba1161a7] {
+.apiPill:hover .apiPillRemove[data-v-3a0f1d21] {
   background: var(--scalar-background-2);
 }
-.dark-mode .apiPill:hover .apiPillRemove[data-v-ba1161a7] {
+.dark-mode .apiPill:hover .apiPillRemove[data-v-3a0f1d21] {
   background: var(--scalar-background-3);
 }
-.apiPillRemove[data-v-ba1161a7]:hover {
+.apiPillRemove[data-v-3a0f1d21]:hover {
   color: var(--scalar-color-1);
 }
-.prompt[data-v-ba1161a7] {
+.prompt[data-v-3a0f1d21] {
   width: 100%;
   outline: none;
   border: none;
@@ -5664,13 +5663,13 @@ input[data-v-ce270af2]::placeholder {
   font-size: 16px;
   padding: 12px 12px 14px 12px;
 }
-.dark-mode .promptForm[data-v-ba1161a7] {
+.dark-mode .promptForm[data-v-3a0f1d21] {
   background: var(--scalar-background-2);
 }
-.prompt[data-v-ba1161a7]:disabled {
+.prompt[data-v-3a0f1d21]:disabled {
   color: var(--scalar-color-3);
 }
-.addAPIButton[data-v-ba1161a7] {
+.addAPIButton[data-v-3a0f1d21] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5687,7 +5686,7 @@ input[data-v-ce270af2]::placeholder {
   z-index: 1;
   box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
 }
-.addAPIButton[data-v-ba1161a7]:hover {
+.addAPIButton[data-v-3a0f1d21]:hover {
   background: color-mix(
     in srgb,
     var(--scalar-background-2),
@@ -5695,47 +5694,47 @@ input[data-v-ce270af2]::placeholder {
   );
   box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
 }
-.dark-mode .addAPIButton[data-v-ba1161a7]:hover {
+.dark-mode .addAPIButton[data-v-3a0f1d21]:hover {
   background: var(--scalar-background-3);
 }
-.settingsButton[data-v-ba1161a7] {
+.settingsButton[data-v-3a0f1d21] {
   color: var(--scalar-color-3) !important;
   border-radius: var(--scalar-radius-full) !important;
   margin: 0 !important;
   z-index: 1;
 }
-.settingsButton[aria-disabled='true'][data-v-ba1161a7] {
+.settingsButton[aria-disabled='true'][data-v-3a0f1d21] {
   background: var(--scalar-background-2);
 }
-.dark-mode .settingsButton[data-v-ba1161a7]:hover {
+.dark-mode .settingsButton[data-v-3a0f1d21]:hover {
   background: var(--scalar-background-3);
 }
-.sendButton[data-v-ba1161a7] {
+.sendButton[data-v-3a0f1d21] {
   background: var(--scalar-color-blue) !important;
   border-radius: var(--scalar-radius-full) !important;
   margin: 0 !important;
   z-index: 1;
   border: var(--scalar-border-width) solid var(--scalar-color-blue);
 }
-.sendButton[data-v-ba1161a7]:not([aria-disabled='true']) {
+.sendButton[data-v-3a0f1d21]:not([aria-disabled='true']) {
   color: white !important;
 }
-.sendButton[data-v-ba1161a7]:not([aria-disabled='true']):hover {
+.sendButton[data-v-3a0f1d21]:not([aria-disabled='true']):hover {
   background: color-mix(
     in srgb,
     var(--scalar-color-blue),
     transparent 10%
   ) !important;
 }
-.sendButton[aria-disabled='true'][data-v-ba1161a7] {
+.sendButton[aria-disabled='true'][data-v-3a0f1d21] {
   background: var(--scalar-background-2) !important;
   color: var(--scalar-color-3) !important;
   border: var(--scalar-border-width) solid var(--scalar-border-color);
 }
-.dark-mode .sendButton[aria-disabled='true'][data-v-ba1161a7] {
+.dark-mode .sendButton[aria-disabled='true'][data-v-3a0f1d21] {
   background: var(--scalar-background-3) !important;
 }
-.contextContainer[data-v-ba1161a7] {
+.contextContainer[data-v-3a0f1d21] {
   display: flex;
   width: 100%;
   padding: 10px 12px 12px 12px;
@@ -5744,25 +5743,25 @@ input[data-v-ce270af2]::placeholder {
   user-select: none;
   justify-content: space-between;
 }
-.settingsButton[data-v-ba1161a7] {
+.settingsButton[data-v-3a0f1d21] {
   font-weight: var(--scalar-semibold);
   border-radius: var(--scalar-radius-lg);
   padding: 4px 6px;
   margin: -4px -6px;
 }
-.settingsButton[data-v-ba1161a7]:hover {
+.settingsButton[data-v-3a0f1d21]:hover {
   background: var(--scalar-background-2);
   box-shadow: 0 0 var(--scalar-border-width) 0 var(--scalar-border-color);
   cursor: pointer;
 }
-.agentLabel[data-v-ba1161a7] {
+.agentLabel[data-v-3a0f1d21] {
   font-size: 0px;
   position: absolute;
   width: 100%;
   height: 100%;
   cursor: text;
 }
-.sendCheckboxContinue[data-v-ba1161a7]:has(input) {
+.sendCheckboxContinue[data-v-3a0f1d21]:has(input) {
   display: flex;
   align-items: center;
   border-radius: var(--scalar-radius-3xl);
@@ -5774,11 +5773,11 @@ input[data-v-ce270af2]::placeholder {
   user-select: none;
   height: 28px;
 }
-.dark-mode .sendCheckboxContinue[data-v-ba1161a7]:has(input) {
+.dark-mode .sendCheckboxContinue[data-v-3a0f1d21]:has(input) {
   background: var(--scalar-background-3);
   box-shadow: 0 0 0 1.5px var(--scalar-background-3);
 }
-.addMoreContext[data-v-ba1161a7] {
+.addMoreContext[data-v-3a0f1d21] {
   height: 40px;
   display: flex;
   position: relative;
@@ -5787,7 +5786,7 @@ input[data-v-ce270af2]::placeholder {
   padding: 0 8px 0 12px;
   align-items: center;
 }
-.addMoreContext[data-v-ba1161a7]:before {
+.addMoreContext[data-v-3a0f1d21]:before {
   content: '';
   width: 8px;
   height: 8px;
@@ -5804,10 +5803,10 @@ input[data-v-ce270af2]::placeholder {
     -0.5px -0.5px 0 var(--scalar-border-color),
     inset 0.5px 0.5px 1px var(--scalar-border-color);
 }
-.dark-mode .addMoreContext[data-v-ba1161a7]:before {
+.dark-mode .addMoreContext[data-v-3a0f1d21]:before {
   box-shadow: -0.5px -0.5px 0 var(--scalar-border-color);
 }
-.addAPIContext[data-v-ba1161a7] {
+.addAPIContext[data-v-3a0f1d21] {
   width: 28px;
   height: 28px;
   border-radius: var(--scalar-radius-full);
@@ -5816,7 +5815,7 @@ input[data-v-ce270af2]::placeholder {
   justify-content: center;
   border: var(--scalar-border-width) solid var(--scalar-border-color);
 }
-.termsAgree[data-v-ba1161a7] {
+.termsAgree[data-v-3a0f1d21] {
   display: flex;
   cursor: pointer;
   height: inherit;
@@ -5825,14 +5824,14 @@ input[data-v-ce270af2]::placeholder {
   gap: 5px;
   margin: 0px 5px;
 }
-.termsAgree[data-v-ba1161a7]:hover {
+.termsAgree[data-v-3a0f1d21]:hover {
   color: var(--scalar-color-1);
 }
-.termsAgree:hover .termsAgreeIcon[data-v-ba1161a7] {
+.termsAgree:hover .termsAgreeIcon[data-v-3a0f1d21] {
   background: var(--scalar-color-1);
   color: var(--scalar-background-1);
 }
-.termsAgreeIcon[data-v-ba1161a7] {
+.termsAgreeIcon[data-v-3a0f1d21] {
   width: inherit;
   height: inherit;
   padding: 2px;

package/dist/views/PromptForm.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import PromptForm_vue_vue_type_script_setup_true_lang_default from "./PromptForm.vue.script.js";
 /* empty css                         */
 //#region src/views/PromptForm.vue
-var PromptForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(PromptForm_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ba1161a7"]]);
+var PromptForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(PromptForm_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3a0f1d21"]]);
 //#endregion
 export { PromptForm_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PromptForm.vue.js","names":[],"sources":["../../src/views/PromptForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarLoading } from '@scalar/components/loading'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport {\n  ScalarIconArrowUp,\n  ScalarIconCheck,\n  ScalarIconLockSimple,\n  ScalarIconPlus,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport ActionsDropdown from '@/components/ActionsDropdown.vue'\nimport ApprovalSection from '@/components/ApprovalSection.vue'\nimport ErrorMessageMessage from '@/components/ErrorMessage.vue'\nimport FreeMessagesInfoSection from '@/components/FreeMessagesInfoSection.vue'\nimport PaymentSection from '@/components/PaymentSection.vue'\nimport SearchPopover from '@/components/SearchPopover.vue'\nimport UploadSection from '@/components/UploadSection.vue'\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { MAX_PROMPT_SIZE } from '@/entities/prompt/constants'\nimport { useRequestApprovals } from '@/hooks/use-chat-approvals'\nimport { useChatError } from '@/hooks/use-chat-error'\nimport { useChatPendingClientToolParts } from '@/hooks/use-chat-pending-client-tool-parts'\nimport { useUploadTmpDocument } from '@/hooks/use-upload-tmp-document'\nimport { useState } from '@/state/state'\n\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'uploadApi'): void\n}>()\n\ndefineExpose({ focusPrompt })\n\nconst promptRef = useTemplateRef<HTMLTextAreaElement>('agentPrompt')\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\n/** Show free messages info only after at least one message has been sent and when no API key is set. */\nconst showFreeMessagesInfo = computed(\n  () =>\n    state.chat.messages.length > 1 &&\n    !state.getAgentKey?.() &&\n    chatError?.value?.code !== AgentErrorCodes.LIMIT_REACHED,\n)\n\nwatch(state.prompt, () => {\n  if (!promptRef?.value) {\n    return\n  }\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 handlePromptKeydown(e: KeyboardEvent) {\n  // Ignore the Enter that only commits an IME composition (e.g. Japanese, Chinese,\n  // Korean). On macOS Chrome that keydown still reports key === 'Enter' with\n  // isComposing === true, so without this guard the message sends mid-composition.\n  if (e.isComposing) {\n    return\n  }\n\n  if (state.loading.value) {\n    return\n  }\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') {\n      promptRef.value?.focus()\n    }\n  },\n)\n\nconst { approvalRequiredParts, respondToRequestApprovals } =\n  useRequestApprovals()\n\nconst { pendingClientToolParts } = useChatPendingClientToolParts()\n\nconst uploadTmpDoc = useUploadTmpDocument()\n\nfunction acceptTerms() {\n  state.terms.accept()\n\n  if (state.mode === 'preview' && state.getActiveDocumentJson) {\n    uploadTmpDoc.uploadTempDocument(state.getActiveDocumentJson(), true)\n  }\n}\n\nconst isPending = computed(() =>\n  Object.values(state.pendingDocuments).some(Boolean),\n)\n\nconst submitDisabled = computed(() => {\n  const tooLarge = promptTooLarge.value\n  const missingInput = !inputHasContent.value\n  const awaitingApproval = approvalRequiredParts.value.length > 0\n  const pendingToolParts = pendingClientToolParts.value.length > 0\n\n  const isPreview = state.mode === 'preview'\n\n  const termsNotAccepted = isPreview && !state.terms.accepted.value\n  const uploadingTmpDoc = isPreview && !!uploadTmpDoc.uploadState.value\n  const isLoading = isPending.value\n\n  return (\n    tooLarge ||\n    missingInput ||\n    awaitingApproval ||\n    pendingToolParts ||\n    termsNotAccepted ||\n    uploadingTmpDoc ||\n    isLoading\n  )\n})\n\nfunction handleSubmit() {\n  if (submitDisabled.value) {\n    return\n  }\n\n  emit('submit')\n}\n\nconst chatError = useChatError()\n</script>\n\n<template>\n  <div class=\"actionContainer\">\n    <UploadSection\n      v-if=\"uploadTmpDoc.uploadState.value || isPending\"\n      :uploadState=\"uploadTmpDoc.uploadState.value ?? { type: 'loading' }\" />\n    <ErrorMessageMessage\n      v-if=\"chatError\"\n      :error=\"chatError\" />\n    <ApprovalSection\n      v-if=\"approvalRequiredParts.length\"\n      @approve=\"respondToRequestApprovals(true)\"\n      @reject=\"respondToRequestApprovals(false)\" />\n    <PaymentSection v-if=\"chatError?.code === AgentErrorCodes.LIMIT_REACHED\" />\n    <FreeMessagesInfoSection v-if=\"showFreeMessagesInfo\" />\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=\"agentPrompt\"\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          <template v-if=\"!state.hideAddApi\">\n            <SearchPopover v-if=\"!state.isLoggedIn?.value\">\n              <button\n                class=\"addAPIButton\"\n                type=\"button\">\n                <ScalarIconPlus\n                  class=\"size-4\"\n                  weight=\"bold\" />\n              </button>\n            </SearchPopover>\n            <ActionsDropdown\n              v-else\n              @uploadApi=\"$emit('uploadApi')\">\n              <button\n                class=\"addAPIButton\"\n                type=\"button\">\n                <ScalarIconPlus\n                  class=\"size-4\"\n                  weight=\"bold\" />\n              </button>\n            </ActionsDropdown>\n          </template>\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              v-if=\"document.removable\"\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          <template v-if=\"!state.loading.value\">\n            <ScalarTooltip content=\"Settings\">\n              <ScalarIconButton\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            </ScalarTooltip>\n          </template>\n          <div class=\"sendCheckboxContinue\">\n            <div\n              v-if=\"!state.terms.accepted.value && state.mode === 'preview'\"\n              class=\"relative flex items-center gap-1.5\">\n              <input\n                id=\"agentTermsAgree\"\n                class=\"sr-only\"\n                type=\"checkbox\"\n                @change=\"acceptTerms\" />\n              <label\n                class=\"termsAgree\"\n                for=\"agentTermsAgree\">\n                <ScalarIconCheck\n                  class=\"termsAgreeIcon\"\n                  weight=\"bold\" />\n                Agree to Terms & Conditions\n              </label>\n            </div>\n            <ScalarIconButton\n              v-if=\"!state.loading.value\"\n              class=\"sendButton h-7 w-7 p-1.5\"\n              :disabled=\"submitDisabled\"\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      </div>\n    </form>\n\n    <div\n      v-if=\"state.chat.messages.length <= 1 && !state.hideAddApi\"\n      class=\"addMoreContext\">\n      <span>Load additional APIs</span>\n      <div class=\"ml-auto flex items-center gap-1\">\n        <button\n          v-for=\"doc of state.curatedDocuments.value\"\n          :key=\"doc.id\"\n          class=\"addAPIContext\"\n          type=\"button\"\n          @click=\"state.addDocument(doc)\">\n          <img\n            v-if=\"doc.logoUrl\"\n            :alt=\"doc.title\"\n            class=\"size-4\"\n            :src=\"doc.logoUrl\" />\n        </button>\n      </div>\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: var(--scalar-radius-3xl);\n  width: 100%;\n  position: relative;\n  /* visually hides overflowing text below */\n  box-shadow: 0 24px 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:\n    var(--scalar-shadow-1),\n    0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n  border-radius: var(--scalar-radius-3xl);\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  position: relative;\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: var(--scalar-radius-3xl);\n  padding: 0 8px;\n  pointer-events: all;\n  z-index: 1;\n  gap: 4px;\n  user-select: none;\n}\n.apiPillLogo {\n  width: 15px;\n}\n\n.apiPillRemove {\n  width: 24px;\n  height: 24px;\n  margin-right: -6px;\n  border-radius: var(--scalar-radius-full);\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: var(--scalar-radius-full);\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  border-radius: var(--scalar-radius-full) !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-color-blue) !important;\n  border-radius: var(--scalar-radius-full) !important;\n  margin: 0 !important;\n  z-index: 1;\n  border: var(--scalar-border-width) solid var(--scalar-color-blue);\n}\n.sendButton:not([aria-disabled='true']) {\n  color: white !important;\n}\n.sendButton:not([aria-disabled='true']):hover {\n  background: color-mix(\n    in srgb,\n    var(--scalar-color-blue),\n    transparent 10%\n  ) !important;\n}\n.sendButton[aria-disabled='true'] {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-3) !important;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\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.sendCheckboxContinue:has(input) {\n  display: flex;\n  align-items: center;\n  border-radius: var(--scalar-radius-3xl);\n  background: var(--scalar-background-2);\n  box-shadow: 0 0 0 1.5px var(--scalar-background-2);\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-semibold);\n  user-select: none;\n  height: 28px;\n}\n.dark-mode .sendCheckboxContinue:has(input) {\n  background: var(--scalar-background-3);\n  box-shadow: 0 0 0 1.5px var(--scalar-background-3);\n}\n\n.addMoreContext {\n  height: 40px;\n  display: flex;\n  position: relative;\n  font-size: var(--scalar-font-size-3);\n  color: var(--scalar-color-3);\n  padding: 0 8px 0 12px;\n  align-items: center;\n}\n.addMoreContext:before {\n  content: '';\n  width: 8px;\n  height: 8px;\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  transform: rotate(45deg);\n  left: 18px;\n  top: -3px;\n  position: absolute;\n  box-shadow:\n    -0.5px -0.5px 0 var(--scalar-border-color),\n    inset 0.5px 0.5px 1px var(--scalar-border-color);\n}\n.dark-mode .addMoreContext:before {\n  box-shadow: -0.5px -0.5px 0 var(--scalar-border-color);\n}\n.addAPIContext {\n  width: 28px;\n  height: 28px;\n  border-radius: var(--scalar-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.termsAgree {\n  display: flex;\n  cursor: pointer;\n  height: inherit;\n  align-items: center;\n  border-radius: var(--scalar-radius-3xl);\n  gap: 5px;\n  margin: 0px 5px;\n}\n\n.termsAgree:hover {\n  color: var(--scalar-color-1);\n}\n\n.termsAgree:hover .termsAgreeIcon {\n  background: var(--scalar-color-1);\n  color: var(--scalar-background-1);\n}\n\n.termsAgreeIcon {\n  width: inherit;\n  height: inherit;\n  padding: 2px;\n  border-radius: var(--scalar-radius-full);\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PromptForm.vue.js","names":[],"sources":["../../src/views/PromptForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarLoading } from '@scalar/components/loading'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport {\n  ScalarIconArrowUp,\n  ScalarIconCheck,\n  ScalarIconLockSimple,\n  ScalarIconPlus,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport ActionsDropdown from '@/components/ActionsDropdown.vue'\nimport ApprovalSection from '@/components/ApprovalSection.vue'\nimport ErrorMessageMessage from '@/components/ErrorMessage.vue'\nimport FreeMessagesInfoSection from '@/components/FreeMessagesInfoSection.vue'\nimport PaymentSection from '@/components/PaymentSection.vue'\nimport SearchPopover from '@/components/SearchPopover.vue'\nimport UploadSection from '@/components/UploadSection.vue'\nimport { AgentErrorCodes } from '@/entities/error/constants'\nimport { MAX_PROMPT_SIZE } from '@/entities/prompt/constants'\nimport { useRequestApprovals } from '@/hooks/use-chat-approvals'\nimport { useChatError } from '@/hooks/use-chat-error'\nimport { useChatPendingClientToolParts } from '@/hooks/use-chat-pending-client-tool-parts'\nimport { useUploadTmpDocument } from '@/hooks/use-upload-tmp-document'\nimport { useState } from '@/state/state'\n\nconst emit = defineEmits<{\n  (e: 'submit'): void\n  (e: 'uploadApi'): void\n}>()\n\ndefineExpose({ focusPrompt })\n\nconst promptRef = useTemplateRef<HTMLTextAreaElement>('agentPrompt')\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\n/** Show free messages info only after at least one message has been sent and when no API key is set. */\nconst showFreeMessagesInfo = computed(\n  () =>\n    state.chat.messages.length > 1 &&\n    !state.getAgentKey?.() &&\n    chatError?.value?.code !== AgentErrorCodes.LIMIT_REACHED,\n)\n\nwatch(state.prompt, () => {\n  if (!promptRef?.value) {\n    return\n  }\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 handlePromptKeydown(e: KeyboardEvent) {\n  // Ignore the Enter that only commits an IME composition (e.g. Japanese, Chinese,\n  // Korean). On macOS Chrome that keydown still reports key === 'Enter' with\n  // isComposing === true, so without this guard the message sends mid-composition.\n  if (e.isComposing) {\n    return\n  }\n\n  if (state.loading.value) {\n    return\n  }\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') {\n      promptRef.value?.focus()\n    }\n  },\n)\n\nconst { approvalRequiredParts, respondToRequestApprovals } =\n  useRequestApprovals()\n\nconst { pendingClientToolParts } = useChatPendingClientToolParts()\n\nconst uploadTmpDoc = useUploadTmpDocument()\n\nfunction acceptTerms() {\n  state.terms.accept()\n\n  if (state.mode === 'preview' && state.getActiveDocumentJson) {\n    void uploadTmpDoc.uploadTempDocument(state.getActiveDocumentJson(), true)\n  }\n}\n\nconst isPending = computed(() =>\n  Object.values(state.pendingDocuments).some(Boolean),\n)\n\nconst submitDisabled = computed(() => {\n  const tooLarge = promptTooLarge.value\n  const missingInput = !inputHasContent.value\n  const awaitingApproval = approvalRequiredParts.value.length > 0\n  const pendingToolParts = pendingClientToolParts.value.length > 0\n\n  const isPreview = state.mode === 'preview'\n\n  const termsNotAccepted = isPreview && !state.terms.accepted.value\n  const uploadingTmpDoc = isPreview && !!uploadTmpDoc.uploadState.value\n  const isLoading = isPending.value\n\n  return (\n    tooLarge ||\n    missingInput ||\n    awaitingApproval ||\n    pendingToolParts ||\n    termsNotAccepted ||\n    uploadingTmpDoc ||\n    isLoading\n  )\n})\n\nfunction handleSubmit() {\n  if (submitDisabled.value) {\n    return\n  }\n\n  emit('submit')\n}\n\nconst chatError = useChatError()\n</script>\n\n<template>\n  <div class=\"actionContainer\">\n    <UploadSection\n      v-if=\"uploadTmpDoc.uploadState.value || isPending\"\n      :uploadState=\"uploadTmpDoc.uploadState.value ?? { type: 'loading' }\" />\n    <ErrorMessageMessage\n      v-if=\"chatError\"\n      :error=\"chatError\" />\n    <ApprovalSection\n      v-if=\"approvalRequiredParts.length\"\n      @approve=\"respondToRequestApprovals(true)\"\n      @reject=\"respondToRequestApprovals(false)\" />\n    <PaymentSection v-if=\"chatError?.code === AgentErrorCodes.LIMIT_REACHED\" />\n    <FreeMessagesInfoSection v-if=\"showFreeMessagesInfo\" />\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=\"agentPrompt\"\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          <template v-if=\"!state.hideAddApi\">\n            <SearchPopover v-if=\"!state.isLoggedIn?.value\">\n              <button\n                class=\"addAPIButton\"\n                type=\"button\">\n                <ScalarIconPlus\n                  class=\"size-4\"\n                  weight=\"bold\" />\n              </button>\n            </SearchPopover>\n            <ActionsDropdown\n              v-else\n              @uploadApi=\"$emit('uploadApi')\">\n              <button\n                class=\"addAPIButton\"\n                type=\"button\">\n                <ScalarIconPlus\n                  class=\"size-4\"\n                  weight=\"bold\" />\n              </button>\n            </ActionsDropdown>\n          </template>\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              v-if=\"document.removable\"\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          <template v-if=\"!state.loading.value\">\n            <ScalarTooltip content=\"Settings\">\n              <ScalarIconButton\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            </ScalarTooltip>\n          </template>\n          <div class=\"sendCheckboxContinue\">\n            <div\n              v-if=\"!state.terms.accepted.value && state.mode === 'preview'\"\n              class=\"relative flex items-center gap-1.5\">\n              <input\n                id=\"agentTermsAgree\"\n                class=\"sr-only\"\n                type=\"checkbox\"\n                @change=\"acceptTerms\" />\n              <label\n                class=\"termsAgree\"\n                for=\"agentTermsAgree\">\n                <ScalarIconCheck\n                  class=\"termsAgreeIcon\"\n                  weight=\"bold\" />\n                Agree to Terms & Conditions\n              </label>\n            </div>\n            <ScalarIconButton\n              v-if=\"!state.loading.value\"\n              class=\"sendButton h-7 w-7 p-1.5\"\n              :disabled=\"submitDisabled\"\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      </div>\n    </form>\n\n    <div\n      v-if=\"state.chat.messages.length <= 1 && !state.hideAddApi\"\n      class=\"addMoreContext\">\n      <span>Load additional APIs</span>\n      <div class=\"ml-auto flex items-center gap-1\">\n        <button\n          v-for=\"doc of state.curatedDocuments.value\"\n          :key=\"doc.id\"\n          class=\"addAPIContext\"\n          type=\"button\"\n          @click=\"state.addDocument(doc)\">\n          <img\n            v-if=\"doc.logoUrl\"\n            :alt=\"doc.title\"\n            class=\"size-4\"\n            :src=\"doc.logoUrl\" />\n        </button>\n      </div>\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: var(--scalar-radius-3xl);\n  width: 100%;\n  position: relative;\n  /* visually hides overflowing text below */\n  box-shadow: 0 24px 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:\n    var(--scalar-shadow-1),\n    0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n  border-radius: var(--scalar-radius-3xl);\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  position: relative;\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: var(--scalar-radius-3xl);\n  padding: 0 8px;\n  pointer-events: all;\n  z-index: 1;\n  gap: 4px;\n  user-select: none;\n}\n.apiPillLogo {\n  width: 15px;\n}\n\n.apiPillRemove {\n  width: 24px;\n  height: 24px;\n  margin-right: -6px;\n  border-radius: var(--scalar-radius-full);\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: var(--scalar-radius-full);\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  border-radius: var(--scalar-radius-full) !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-color-blue) !important;\n  border-radius: var(--scalar-radius-full) !important;\n  margin: 0 !important;\n  z-index: 1;\n  border: var(--scalar-border-width) solid var(--scalar-color-blue);\n}\n.sendButton:not([aria-disabled='true']) {\n  color: white !important;\n}\n.sendButton:not([aria-disabled='true']):hover {\n  background: color-mix(\n    in srgb,\n    var(--scalar-color-blue),\n    transparent 10%\n  ) !important;\n}\n.sendButton[aria-disabled='true'] {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-3) !important;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\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.sendCheckboxContinue:has(input) {\n  display: flex;\n  align-items: center;\n  border-radius: var(--scalar-radius-3xl);\n  background: var(--scalar-background-2);\n  box-shadow: 0 0 0 1.5px var(--scalar-background-2);\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-font-size-3);\n  font-weight: var(--scalar-semibold);\n  user-select: none;\n  height: 28px;\n}\n.dark-mode .sendCheckboxContinue:has(input) {\n  background: var(--scalar-background-3);\n  box-shadow: 0 0 0 1.5px var(--scalar-background-3);\n}\n\n.addMoreContext {\n  height: 40px;\n  display: flex;\n  position: relative;\n  font-size: var(--scalar-font-size-3);\n  color: var(--scalar-color-3);\n  padding: 0 8px 0 12px;\n  align-items: center;\n}\n.addMoreContext:before {\n  content: '';\n  width: 8px;\n  height: 8px;\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  transform: rotate(45deg);\n  left: 18px;\n  top: -3px;\n  position: absolute;\n  box-shadow:\n    -0.5px -0.5px 0 var(--scalar-border-color),\n    inset 0.5px 0.5px 1px var(--scalar-border-color);\n}\n.dark-mode .addMoreContext:before {\n  box-shadow: -0.5px -0.5px 0 var(--scalar-border-color);\n}\n.addAPIContext {\n  width: 28px;\n  height: 28px;\n  border-radius: var(--scalar-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.termsAgree {\n  display: flex;\n  cursor: pointer;\n  height: inherit;\n  align-items: center;\n  border-radius: var(--scalar-radius-3xl);\n  gap: 5px;\n  margin: 0px 5px;\n}\n\n.termsAgree:hover {\n  color: var(--scalar-color-1);\n}\n\n.termsAgree:hover .termsAgreeIcon {\n  background: var(--scalar-color-1);\n  color: var(--scalar-background-1);\n}\n\n.termsAgreeIcon {\n  width: inherit;\n  height: inherit;\n  padding: 2px;\n  border-radius: var(--scalar-radius-full);\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}