npm - @knime/product-features - Versions diffs - 1.2.3 → 1.2.4 - Mend

@knime/product-features 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,14 @@
 # @knime/product-features
+## 1.2.4
+### Patch Changes
+- 4dbca83: Add missing support for Widget types in `NodePreview`
+- Updated dependencies [8e4ebf0]
+  - @knime/kds-styles@2.5.1
+  - @knime/kds-components@2.5.1
 ## 1.2.3
 ### Patch Changes

package/dist/_plugin-vue_export-helper-BOaGB7Aw.js ADDED Viewed

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as t };

package/dist/ai.js CHANGED Viewed

@@ -1,197 +1,186 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, unref, createElementVNode, toDisplayString, createBlock, createCommentVNode, useModel, useTemplateRef, computed, watch, withDirectives, vModelText, withModifiers, mergeModels } from 'vue';
-import { useResizeObserver } from '@vueuse/core';
-import { KdsIcon, KdsButton, KdsProgressBar, KdsLink } from '@knime/kds-components';
-import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
-import './ai.css';const _hoisted_1$1 = ["role"];
-const _hoisted_2$1 = {
-  class: "text",
-  tabindex: "0"
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, useTemplateRef, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { KdsButton, KdsIcon, KdsLink, KdsProgressBar } from "@knime/kds-components";
+import './ai.css';//#region src/ai/KdsPromptInput/InlineStatusBanner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["role"];
+var _hoisted_2$1 = {
+	class: "text",
+	tabindex: "0"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "InlineStatusBanner",
-  props: {
-    status: {}
-  },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["inline-status-banner", __props.status.type]),
-        role: __props.status.type === "error" ? "alert" : "status"
-      }, [
-        createVNode(unref(KdsIcon), {
-          name: __props.status.type === "error" ? "circle-error" : "circle-info",
-          size: "small",
-          class: "icon"
-        }, null, 8, ["name"]),
-        createElementVNode("span", _hoisted_2$1, toDisplayString(__props.status.message), 1),
-        __props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
-          key: 0,
-          class: "action",
-          size: "small",
-          variant: "filled",
-          label: __props.status.buttonLabel,
-          onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick"))
-        }, null, 8, ["label"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$1);
-    };
-  }
-});
-const InlineStatusBanner = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-506380c6"]]);
-const _hoisted_1 = { class: "prompt-input" };
-const _hoisted_2 = { class: "text-input-wrapper" };
-const _hoisted_3 = ["placeholder", "disabled", "aria-label"];
-const _hoisted_4 = { class: "action" };
-const _hoisted_5 = {
-  key: 1,
-  class: "subtext"
+//#endregion
+//#region src/ai/KdsPromptInput/InlineStatusBanner.vue
+var InlineStatusBanner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "InlineStatusBanner",
+	props: { status: {} },
+	emits: ["buttonClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["inline-status-banner", __props.status.type]),
+				role: __props.status.type === "error" ? "alert" : "status"
+			}, [
+				createVNode(unref(KdsIcon), {
+					name: __props.status.type === "error" ? "circle-error" : "circle-info",
+					size: "small",
+					class: "icon"
+				}, null, 8, ["name"]),
+				createElementVNode("span", _hoisted_2$1, toDisplayString(__props.status.message), 1),
+				__props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
+					key: 0,
+					class: "action",
+					size: "small",
+					variant: "filled",
+					label: __props.status.buttonLabel,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick"))
+				}, null, 8, ["label"])) : createCommentVNode("", true)
+			], 10, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-506380c6"]]);
+//#endregion
+//#region src/ai/KdsPromptInput/KdsPromptInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "prompt-input" };
+var _hoisted_2 = { class: "text-input-wrapper" };
+var _hoisted_3 = [
+	"placeholder",
+	"disabled",
+	"aria-label"
+];
+var _hoisted_4 = { class: "action" };
+var _hoisted_5 = {
+	key: 1,
+	class: "subtext"
 };
-const _hoisted_6 = {
-  key: 0,
-  class: "subtext-left"
+var _hoisted_6 = {
+	key: 0,
+	class: "subtext-left"
 };
-const _hoisted_7 = {
-  key: 1,
-  class: "subtext-right"
+var _hoisted_7 = {
+	key: 1,
+	class: "subtext-right"
 };
-const _hoisted_8 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "KdsPromptInput",
-  props: /* @__PURE__ */ mergeModels({
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    status: { default: () => void 0 },
-    ariaLabel: { default: "Prompt" },
-    leftSubtext: { default: () => void 0 },
-    rightSubtext: { default: () => void 0 },
-    link: { default: () => void 0 }
-  }, {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["submit", "stop", "statusButtonClick"], ["update:modelValue"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const emit = __emit;
-    const modelValue = useModel(__props, "modelValue");
-    const textareaRef = useTemplateRef("textareaRef");
-    const canSubmit = computed(
-      () => !__props.disabled && !__props.loading && modelValue.value.trim().length > 0
-    );
-    function resizeTextarea() {
-      const el = textareaRef.value;
-      if (!el) {
-        return;
-      }
-      requestAnimationFrame(() => {
-        if (!textareaRef.value) {
-          return;
-        }
-        el.style.height = "auto";
-        const scrollHeight = el.scrollHeight;
-        if (scrollHeight <= el.offsetHeight) {
-          return;
-        }
-        el.style.height = `${scrollHeight}px`;
-      });
-    }
-    useResizeObserver(textareaRef, resizeTextarea);
-    watch(modelValue, resizeTextarea, { immediate: true });
-    function onSubmit() {
-      if (!canSubmit.value) {
-        return;
-      }
-      emit("submit", modelValue.value.trim());
-    }
-    function onKeydown(event) {
-      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
-        event.preventDefault();
-        onSubmit();
-      }
-    }
-    __expose({
-      focus: () => textareaRef.value?.focus()
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        __props.status ? (openBlock(), createBlock(InlineStatusBanner, {
-          key: 0,
-          status: __props.status,
-          onButtonClick: _cache[0] || (_cache[0] = ($event) => emit("statusButtonClick"))
-        }, null, 8, ["status"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["input-container", { disabled: __props.disabled }]),
-          onClick: _cache[3] || (_cache[3] = ($event) => textareaRef.value?.focus())
-        }, [
-          __props.loading ? (openBlock(), createBlock(unref(KdsProgressBar), {
-            key: 0,
-            class: "progress-bar",
-            indeterminate: ""
-          })) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2, [
-            withDirectives(createElementVNode("textarea", {
-              ref_key: "textareaRef",
-              ref: textareaRef,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
-              class: "text-input",
-              rows: "1",
-              placeholder: __props.placeholder,
-              disabled: __props.disabled,
-              "aria-label": __props.ariaLabel,
-              onKeydown
-            }, null, 40, _hoisted_3), [
-              [vModelText, modelValue.value]
-            ])
-          ]),
-          createElementVNode("div", _hoisted_4, [
-            __props.loading ? (openBlock(), createBlock(unref(KdsButton), {
-              key: 0,
-              variant: "outlined",
-              "leading-icon": "stop",
-              size: "medium",
-              ariaLabel: "Stop",
-              onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("stop"), ["stop"]))
-            })) : (openBlock(), createBlock(unref(KdsButton), {
-              key: 1,
-              variant: "filled",
-              "leading-icon": "send",
-              size: "medium",
-              ariaLabel: "Send",
-              disabled: !canSubmit.value,
-              onClick: withModifiers(onSubmit, ["stop"])
-            }, null, 8, ["disabled"]))
-          ])
-        ], 2),
-        __props.leftSubtext || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          __props.leftSubtext ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.leftSubtext), 1)) : createCommentVNode("", true),
-          __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            __props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true),
-            __props.link ? (openBlock(), createBlock(unref(KdsLink), {
-              key: 1,
-              label: __props.link.label,
-              to: __props.link.to,
-              size: "small"
-            }, null, 8, ["label", "to"])) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const KdsPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6b41a78"]]);
-const kdsPromptInputStatusType = {
-  ERROR: "error",
-  NOTE: "note"
+var _hoisted_8 = { key: 0 };
+//#endregion
+//#region src/ai/KdsPromptInput/KdsPromptInput.vue
+var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "KdsPromptInput",
+	props: /*@__PURE__*/ mergeModels({
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		status: { default: () => void 0 },
+		ariaLabel: { default: "Prompt" },
+		leftSubtext: { default: () => void 0 },
+		rightSubtext: { default: () => void 0 },
+		link: { default: () => void 0 }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"submit",
+		"stop",
+		"statusButtonClick"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const modelValue = useModel(__props, "modelValue");
+		const textareaRef = useTemplateRef("textareaRef");
+		const canSubmit = computed(() => !__props.disabled && !__props.loading && modelValue.value.trim().length > 0);
+		function resizeTextarea() {
+			const el = textareaRef.value;
+			if (!el) return;
+			requestAnimationFrame(() => {
+				if (!textareaRef.value) return;
+				el.style.height = "auto";
+				const scrollHeight = el.scrollHeight;
+				if (scrollHeight <= el.offsetHeight) return;
+				el.style.height = `${scrollHeight}px`;
+			});
+		}
+		useResizeObserver(textareaRef, resizeTextarea);
+		watch(modelValue, resizeTextarea, { immediate: true });
+		function onSubmit() {
+			if (!canSubmit.value) return;
+			emit("submit", modelValue.value.trim());
+		}
+		function onKeydown(event) {
+			if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+				event.preventDefault();
+				onSubmit();
+			}
+		}
+		__expose({ focus: () => textareaRef.value?.focus() });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.status ? (openBlock(), createBlock(InlineStatusBanner_default, {
+					key: 0,
+					status: __props.status,
+					onButtonClick: _cache[0] || (_cache[0] = ($event) => emit("statusButtonClick"))
+				}, null, 8, ["status"])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(["input-container", { disabled: __props.disabled }]),
+					onClick: _cache[3] || (_cache[3] = ($event) => textareaRef.value?.focus())
+				}, [
+					__props.loading ? (openBlock(), createBlock(unref(KdsProgressBar), {
+						key: 0,
+						class: "progress-bar",
+						indeterminate: ""
+					})) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("textarea", {
+						ref_key: "textareaRef",
+						ref: textareaRef,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+						class: "text-input",
+						rows: "1",
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						"aria-label": __props.ariaLabel,
+						onKeydown
+					}, null, 40, _hoisted_3), [[vModelText, modelValue.value]])]),
+					createElementVNode("div", _hoisted_4, [__props.loading ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 0,
+						variant: "outlined",
+						"leading-icon": "stop",
+						size: "medium",
+						ariaLabel: "Stop",
+						onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("stop"), ["stop"]))
+					})) : (openBlock(), createBlock(unref(KdsButton), {
+						key: 1,
+						variant: "filled",
+						"leading-icon": "send",
+						size: "medium",
+						ariaLabel: "Send",
+						disabled: !canSubmit.value,
+						onClick: withModifiers(onSubmit, ["stop"])
+					}, null, 8, ["disabled"]))])
+				], 2),
+				__props.leftSubtext || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_5, [__props.leftSubtext ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.leftSubtext), 1)) : createCommentVNode("", true), __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true), __props.link ? (openBlock(), createBlock(unref(KdsLink), {
+					key: 1,
+					label: __props.link.label,
+					to: __props.link.to,
+					size: "small"
+				}, null, 8, ["label", "to"])) : createCommentVNode("", true)])) : createCommentVNode("", true)])) : createCommentVNode("", true)
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-e6b41a78"]]);
+//#endregion
+//#region src/ai/KdsPromptInput/enums.ts
+var kdsPromptInputStatusType = {
+	ERROR: "error",
+	NOTE: "note"
 };
-const kdsPromptInputStatusTypes = Object.values(
-  kdsPromptInputStatusType
-);
+var kdsPromptInputStatusTypes = Object.values(kdsPromptInputStatusType);
+//#endregion
+export { KdsPromptInput_default as KdsPromptInput, kdsPromptInputStatusType, kdsPromptInputStatusTypes };
-export { KdsPromptInput, kdsPromptInputStatusType, kdsPromptInputStatusTypes };
-//# sourceMappingURL=ai.js.map
+//# sourceMappingURL=ai.js.map

package/dist/ai.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai.js","sources":["../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/enums.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n buttonClick: [];\n}>();\n</script>\n\n<template>\n <div\n :class=\"['inline-status-banner', status.type]\"\n :role=\"status.type === 'error' ? 'alert' : 'status'\"\n >\n <KdsIcon\n :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n size=\"small\"\n class=\"icon\"\n />\n <!--\n tabindex=\"0\" so keyboard users can scroll the message when it\n overflows the 2-line cap (axe rule: scrollable-region-focusable).\n -->\n <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n <KdsButton\n v-if=\"status.buttonLabel\"\n class=\"action\"\n size=\"small\"\n variant=\"filled\"\n :label=\"status.buttonLabel\"\n @click=\"emit('buttonClick')\"\n />\n </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n display: flex;\n gap: var(--kds-spacing-container-0-37x);\n align-items: center;\n\n /\n The banner extends 0.25x behind the input below so the input's\n * rounded top corners carve out of the banner's bottom edge.\n * The extra 0.25x of bottom padding keeps the\n * content visually centered against the visible portion of the box.\n * Top and horizontal padding subtract the border width so the box\n * matches Figma (where the border is drawn outside the layout box).\n * Bottom has no border, so no subtraction is needed there.\n /\n padding: calc(\n var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n )\n calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n margin-bottom: calc(-1 var(--kds-spacing-container-0-25x));\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n border-style: solid;\n border-width: var(--kds-core-border-width-xs);\n border-bottom: none;\n border-top-left-radius: var(--kds-border-radius-container-0-50x);\n border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n .icon,\n .action {\n flex-shrink: 0;\n }\n\n &.error {\n background-color: var(--kds-color-background-static-danger-muted);\n border: var(--kds-border-base-danger);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-danger);\n }\n }\n\n &.note {\n background-color: var(--kds-color-background-static-info-muted);\n border: var(--kds-border-base-info);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-info);\n }\n }\n}\n\n.text {\n flex: 1 0 0;\n min-width: 0;\n\n /* Allow up to 2 lines, scroll beyond that. /\n max-height: calc(2 1lh);\n overflow-y: auto;\n overflow-wrap: anywhere;\n scrollbar-width: thin;\n\n &:focus-visible {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n placeholder = \"\",\n disabled = false,\n loading = false,\n status = undefined,\n ariaLabel = \"Prompt\",\n leftSubtext = undefined,\n rightSubtext = undefined,\n link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n /** User submitted the prompt (Enter or send button). /\n submit: [value: string];\n /* User clicked the stop button while loading. /\n stop: [];\n /* User clicked the action button inside the inline status banner. /\n statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n const el = textareaRef.value;\n if (!el) {\n return;\n }\n // Defer style writes to the next animation frame so they don't run inside\n // the ResizeObserver callback (which would otherwise trigger the\n // \"ResizeObserver loop completed with undelivered notifications\" warning).\n requestAnimationFrame(() => {\n if (!textareaRef.value) {\n return;\n }\n el.style.height = \"auto\";\n const scrollHeight = el.scrollHeight;\n if (scrollHeight <= el.offsetHeight) {\n return;\n }\n el.style.height = `${scrollHeight}px`;\n });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n if (!canSubmit.value) {\n return;\n }\n emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n // composition session is in progress.\n if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n event.preventDefault();\n onSubmit();\n }\n}\n\ndefineExpose({\n focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n <div class=\"prompt-input\">\n <InlineStatusBanner\n v-if=\"status\"\n :status=\"status\"\n @button-click=\"emit('statusButtonClick')\"\n />\n\n <div\n :class=\"['input-container', { disabled }]\"\n @click=\"textareaRef?.focus()\"\n >\n <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n <div class=\"text-input-wrapper\">\n <textarea\n ref=\"textareaRef\"\n v-model=\"modelValue\"\n class=\"text-input\"\n rows=\"1\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n @keydown=\"onKeydown\"\n />\n </div>\n\n <div class=\"action\">\n <KdsButton\n v-if=\"loading\"\n variant=\"outlined\"\n leading-icon=\"stop\"\n size=\"medium\"\n ariaLabel=\"Stop\"\n @click.stop=\"emit('stop')\"\n />\n <KdsButton\n v-else\n variant=\"filled\"\n leading-icon=\"send\"\n size=\"medium\"\n ariaLabel=\"Send\"\n :disabled=\"!canSubmit\"\n @click.stop=\"onSubmit\"\n />\n </div>\n </div>\n\n <div v-if=\"leftSubtext \|\| rightSubtext \|\| link\" class=\"subtext\">\n <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n <div v-if=\"rightSubtext \|\| link\" class=\"subtext-right\">\n <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" size=\"small\" />\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.prompt-input {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.input-container {\n position: relative;\n display: flex;\n gap: var(--kds-spacing-container-0-5x);\n align-items: flex-end;\n padding: calc(\n var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n );\n overflow: hidden;\n cursor: text;\n background: var(--kds-color-background-input-initial);\n border: var(--kds-border-action-input);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n &:has(textarea:focus:not(:disabled)) {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n\n &:has(textarea:hover:not(:disabled, :focus)) {\n background: var(--kds-color-background-input-hover);\n }\n\n &.disabled {\n cursor: default;\n border: var(--kds-border-action-disabled);\n }\n}\n\n.text-input-wrapper {\n display: flex;\n flex: 1 0 0;\n align-items: center;\n min-width: 0;\n\n /\n * Match the Send/Stop button height so a single-line textarea sits\n * vertically centered against the button.\n /\n min-height: var(--kds-dimension-component-height-1-75x);\n padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n width: 100%;\n min-width: 0;\n\n / Cap textarea growth at 4 lines, scroll beyond that. /\n max-height: calc(4 1lh);\n padding: 0;\n overflow-y: auto;\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n resize: none;\n outline: none;\n scrollbar-width: none;\n background: transparent;\n border: none;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-subtle);\n }\n\n &:disabled {\n color: var(--kds-color-text-and-icon-disabled);\n cursor: default;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-disabled);\n }\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n.action {\n display: flex;\n flex-shrink: 0;\n align-items: flex-end;\n}\n\n.progress-bar {\n position: absolute;\n inset: -1px 0 auto;\n}\n\n.subtext {\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n align-items: center;\n padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n 0;\n font: var(--kds-font-base-subtext-small);\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n /\n Take all remaining inline space so the right block is pushed to the\n * end. `min-width: 0` lets the ellipsis kick in when the right block\n * grows past the container width.\n /\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.subtext-right {\n /\n * On row 1 (alongside .subtext-left) the right block stays at its\n * intrinsic width — line-breaking in flex layout is decided from\n * `flex-basis`, so it wraps onto its own row as soon as the container\n * is narrower than that intrinsic width. On row 2 (its own row) the\n * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n * container width and wrap its own content (text + link).\n */\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x);\n align-items: center;\n min-width: 0;\n margin-left: auto;\n}\n</style>\n","export const kdsPromptInputStatusType = {\n ERROR: \"error\",\n NOTE: \"note\",\n} as const;\n\nexport const kdsPromptInputStatusTypes = Object.values(\n kdsPromptInputStatusType,\n);\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_unref","_createElementVNode","_hoisted_2","_toDisplayString","_createBlock","_useModel","_openBlock"],"mappings":"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"}
1	+ {"version":3,"file":"ai.js","names":[],"sources":["../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/enums.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n buttonClick: [];\n}>();\n</script>\n\n<template>\n <div\n :class=\"['inline-status-banner', status.type]\"\n :role=\"status.type === 'error' ? 'alert' : 'status'\"\n >\n <KdsIcon\n :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n size=\"small\"\n class=\"icon\"\n />\n <!--\n tabindex=\"0\" so keyboard users can scroll the message when it\n overflows the 2-line cap (axe rule: scrollable-region-focusable).\n -->\n <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n <KdsButton\n v-if=\"status.buttonLabel\"\n class=\"action\"\n size=\"small\"\n variant=\"filled\"\n :label=\"status.buttonLabel\"\n @click=\"emit('buttonClick')\"\n />\n </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n display: flex;\n gap: var(--kds-spacing-container-0-37x);\n align-items: center;\n\n /\n The banner extends 0.25x behind the input below so the input's\n * rounded top corners carve out of the banner's bottom edge.\n * The extra 0.25x of bottom padding keeps the\n * content visually centered against the visible portion of the box.\n * Top and horizontal padding subtract the border width so the box\n * matches Figma (where the border is drawn outside the layout box).\n * Bottom has no border, so no subtraction is needed there.\n /\n padding: calc(\n var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n )\n calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n margin-bottom: calc(-1 var(--kds-spacing-container-0-25x));\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n border-style: solid;\n border-width: var(--kds-core-border-width-xs);\n border-bottom: none;\n border-top-left-radius: var(--kds-border-radius-container-0-50x);\n border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n .icon,\n .action {\n flex-shrink: 0;\n }\n\n &.error {\n background-color: var(--kds-color-background-static-danger-muted);\n border: var(--kds-border-base-danger);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-danger);\n }\n }\n\n &.note {\n background-color: var(--kds-color-background-static-info-muted);\n border: var(--kds-border-base-info);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-info);\n }\n }\n}\n\n.text {\n flex: 1 0 0;\n min-width: 0;\n\n /* Allow up to 2 lines, scroll beyond that. /\n max-height: calc(2 1lh);\n overflow-y: auto;\n overflow-wrap: anywhere;\n scrollbar-width: thin;\n\n &:focus-visible {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n buttonClick: [];\n}>();\n</script>\n\n<template>\n <div\n :class=\"['inline-status-banner', status.type]\"\n :role=\"status.type === 'error' ? 'alert' : 'status'\"\n >\n <KdsIcon\n :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n size=\"small\"\n class=\"icon\"\n />\n <!--\n tabindex=\"0\" so keyboard users can scroll the message when it\n overflows the 2-line cap (axe rule: scrollable-region-focusable).\n -->\n <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n <KdsButton\n v-if=\"status.buttonLabel\"\n class=\"action\"\n size=\"small\"\n variant=\"filled\"\n :label=\"status.buttonLabel\"\n @click=\"emit('buttonClick')\"\n />\n </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n display: flex;\n gap: var(--kds-spacing-container-0-37x);\n align-items: center;\n\n /\n The banner extends 0.25x behind the input below so the input's\n * rounded top corners carve out of the banner's bottom edge.\n * The extra 0.25x of bottom padding keeps the\n * content visually centered against the visible portion of the box.\n * Top and horizontal padding subtract the border width so the box\n * matches Figma (where the border is drawn outside the layout box).\n * Bottom has no border, so no subtraction is needed there.\n /\n padding: calc(\n var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n )\n calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n margin-bottom: calc(-1 var(--kds-spacing-container-0-25x));\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n border-style: solid;\n border-width: var(--kds-core-border-width-xs);\n border-bottom: none;\n border-top-left-radius: var(--kds-border-radius-container-0-50x);\n border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n .icon,\n .action {\n flex-shrink: 0;\n }\n\n &.error {\n background-color: var(--kds-color-background-static-danger-muted);\n border: var(--kds-border-base-danger);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-danger);\n }\n }\n\n &.note {\n background-color: var(--kds-color-background-static-info-muted);\n border: var(--kds-border-base-info);\n border-bottom: none;\n\n .icon {\n color: var(--kds-color-text-and-icon-info);\n }\n }\n}\n\n.text {\n flex: 1 0 0;\n min-width: 0;\n\n /* Allow up to 2 lines, scroll beyond that. /\n max-height: calc(2 1lh);\n overflow-y: auto;\n overflow-wrap: anywhere;\n scrollbar-width: thin;\n\n &:focus-visible {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n placeholder = \"\",\n disabled = false,\n loading = false,\n status = undefined,\n ariaLabel = \"Prompt\",\n leftSubtext = undefined,\n rightSubtext = undefined,\n link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n /** User submitted the prompt (Enter or send button). /\n submit: [value: string];\n /* User clicked the stop button while loading. /\n stop: [];\n /* User clicked the action button inside the inline status banner. /\n statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n const el = textareaRef.value;\n if (!el) {\n return;\n }\n // Defer style writes to the next animation frame so they don't run inside\n // the ResizeObserver callback (which would otherwise trigger the\n // \"ResizeObserver loop completed with undelivered notifications\" warning).\n requestAnimationFrame(() => {\n if (!textareaRef.value) {\n return;\n }\n el.style.height = \"auto\";\n const scrollHeight = el.scrollHeight;\n if (scrollHeight <= el.offsetHeight) {\n return;\n }\n el.style.height = `${scrollHeight}px`;\n });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n if (!canSubmit.value) {\n return;\n }\n emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n // composition session is in progress.\n if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n event.preventDefault();\n onSubmit();\n }\n}\n\ndefineExpose({\n focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n <div class=\"prompt-input\">\n <InlineStatusBanner\n v-if=\"status\"\n :status=\"status\"\n @button-click=\"emit('statusButtonClick')\"\n />\n\n <div\n :class=\"['input-container', { disabled }]\"\n @click=\"textareaRef?.focus()\"\n >\n <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n <div class=\"text-input-wrapper\">\n <textarea\n ref=\"textareaRef\"\n v-model=\"modelValue\"\n class=\"text-input\"\n rows=\"1\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n @keydown=\"onKeydown\"\n />\n </div>\n\n <div class=\"action\">\n <KdsButton\n v-if=\"loading\"\n variant=\"outlined\"\n leading-icon=\"stop\"\n size=\"medium\"\n ariaLabel=\"Stop\"\n @click.stop=\"emit('stop')\"\n />\n <KdsButton\n v-else\n variant=\"filled\"\n leading-icon=\"send\"\n size=\"medium\"\n ariaLabel=\"Send\"\n :disabled=\"!canSubmit\"\n @click.stop=\"onSubmit\"\n />\n </div>\n </div>\n\n <div v-if=\"leftSubtext \|\| rightSubtext \|\| link\" class=\"subtext\">\n <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n <div v-if=\"rightSubtext \|\| link\" class=\"subtext-right\">\n <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" size=\"small\" />\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.prompt-input {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.input-container {\n position: relative;\n display: flex;\n gap: var(--kds-spacing-container-0-5x);\n align-items: flex-end;\n padding: calc(\n var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n );\n overflow: hidden;\n cursor: text;\n background: var(--kds-color-background-input-initial);\n border: var(--kds-border-action-input);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n &:has(textarea:focus:not(:disabled)) {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n\n &:has(textarea:hover:not(:disabled, :focus)) {\n background: var(--kds-color-background-input-hover);\n }\n\n &.disabled {\n cursor: default;\n border: var(--kds-border-action-disabled);\n }\n}\n\n.text-input-wrapper {\n display: flex;\n flex: 1 0 0;\n align-items: center;\n min-width: 0;\n\n /\n * Match the Send/Stop button height so a single-line textarea sits\n * vertically centered against the button.\n /\n min-height: var(--kds-dimension-component-height-1-75x);\n padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n width: 100%;\n min-width: 0;\n\n / Cap textarea growth at 4 lines, scroll beyond that. /\n max-height: calc(4 1lh);\n padding: 0;\n overflow-y: auto;\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n resize: none;\n outline: none;\n scrollbar-width: none;\n background: transparent;\n border: none;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-subtle);\n }\n\n &:disabled {\n color: var(--kds-color-text-and-icon-disabled);\n cursor: default;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-disabled);\n }\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n.action {\n display: flex;\n flex-shrink: 0;\n align-items: flex-end;\n}\n\n.progress-bar {\n position: absolute;\n inset: -1px 0 auto;\n}\n\n.subtext {\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n align-items: center;\n padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n 0;\n font: var(--kds-font-base-subtext-small);\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n /\n Take all remaining inline space so the right block is pushed to the\n * end. `min-width: 0` lets the ellipsis kick in when the right block\n * grows past the container width.\n /\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.subtext-right {\n /\n * On row 1 (alongside .subtext-left) the right block stays at its\n * intrinsic width — line-breaking in flex layout is decided from\n * `flex-basis`, so it wraps onto its own row as soon as the container\n * is narrower than that intrinsic width. On row 2 (its own row) the\n * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n * container width and wrap its own content (text + link).\n /\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x);\n align-items: center;\n min-width: 0;\n margin-left: auto;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n placeholder = \"\",\n disabled = false,\n loading = false,\n status = undefined,\n ariaLabel = \"Prompt\",\n leftSubtext = undefined,\n rightSubtext = undefined,\n link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n /* User submitted the prompt (Enter or send button). /\n submit: [value: string];\n /* User clicked the stop button while loading. /\n stop: [];\n /* User clicked the action button inside the inline status banner. /\n statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n const el = textareaRef.value;\n if (!el) {\n return;\n }\n // Defer style writes to the next animation frame so they don't run inside\n // the ResizeObserver callback (which would otherwise trigger the\n // \"ResizeObserver loop completed with undelivered notifications\" warning).\n requestAnimationFrame(() => {\n if (!textareaRef.value) {\n return;\n }\n el.style.height = \"auto\";\n const scrollHeight = el.scrollHeight;\n if (scrollHeight <= el.offsetHeight) {\n return;\n }\n el.style.height = `${scrollHeight}px`;\n });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n if (!canSubmit.value) {\n return;\n }\n emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n // composition session is in progress.\n if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n event.preventDefault();\n onSubmit();\n }\n}\n\ndefineExpose({\n focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n <div class=\"prompt-input\">\n <InlineStatusBanner\n v-if=\"status\"\n :status=\"status\"\n @button-click=\"emit('statusButtonClick')\"\n />\n\n <div\n :class=\"['input-container', { disabled }]\"\n @click=\"textareaRef?.focus()\"\n >\n <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n <div class=\"text-input-wrapper\">\n <textarea\n ref=\"textareaRef\"\n v-model=\"modelValue\"\n class=\"text-input\"\n rows=\"1\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n @keydown=\"onKeydown\"\n />\n </div>\n\n <div class=\"action\">\n <KdsButton\n v-if=\"loading\"\n variant=\"outlined\"\n leading-icon=\"stop\"\n size=\"medium\"\n ariaLabel=\"Stop\"\n @click.stop=\"emit('stop')\"\n />\n <KdsButton\n v-else\n variant=\"filled\"\n leading-icon=\"send\"\n size=\"medium\"\n ariaLabel=\"Send\"\n :disabled=\"!canSubmit\"\n @click.stop=\"onSubmit\"\n />\n </div>\n </div>\n\n <div v-if=\"leftSubtext \|\| rightSubtext \|\| link\" class=\"subtext\">\n <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n <div v-if=\"rightSubtext \|\| link\" class=\"subtext-right\">\n <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" size=\"small\" />\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.prompt-input {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.input-container {\n position: relative;\n display: flex;\n gap: var(--kds-spacing-container-0-5x);\n align-items: flex-end;\n padding: calc(\n var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n );\n overflow: hidden;\n cursor: text;\n background: var(--kds-color-background-input-initial);\n border: var(--kds-border-action-input);\n border-radius: var(--kds-border-radius-container-0-37x);\n\n &:has(textarea:focus:not(:disabled)) {\n outline: var(--kds-border-action-focused);\n outline-offset: var(--kds-spacing-offset-focus);\n }\n\n &:has(textarea:hover:not(:disabled, :focus)) {\n background: var(--kds-color-background-input-hover);\n }\n\n &.disabled {\n cursor: default;\n border: var(--kds-border-action-disabled);\n }\n}\n\n.text-input-wrapper {\n display: flex;\n flex: 1 0 0;\n align-items: center;\n min-width: 0;\n\n /\n * Match the Send/Stop button height so a single-line textarea sits\n * vertically centered against the button.\n /\n min-height: var(--kds-dimension-component-height-1-75x);\n padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n width: 100%;\n min-width: 0;\n\n / Cap textarea growth at 4 lines, scroll beyond that. /\n max-height: calc(4 1lh);\n padding: 0;\n overflow-y: auto;\n font: var(--kds-font-base-body-small);\n color: var(--kds-color-text-and-icon-neutral);\n resize: none;\n outline: none;\n scrollbar-width: none;\n background: transparent;\n border: none;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-subtle);\n }\n\n &:disabled {\n color: var(--kds-color-text-and-icon-disabled);\n cursor: default;\n\n &::placeholder {\n color: var(--kds-color-text-and-icon-disabled);\n }\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n.action {\n display: flex;\n flex-shrink: 0;\n align-items: flex-end;\n}\n\n.progress-bar {\n position: absolute;\n inset: -1px 0 auto;\n}\n\n.subtext {\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n align-items: center;\n padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n 0;\n font: var(--kds-font-base-subtext-small);\n color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n /\n Take all remaining inline space so the right block is pushed to the\n * end. `min-width: 0` lets the ellipsis kick in when the right block\n * grows past the container width.\n /\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.subtext-right {\n /\n * On row 1 (alongside .subtext-left) the right block stays at its\n * intrinsic width — line-breaking in flex layout is decided from\n * `flex-basis`, so it wraps onto its own row as soon as the container\n * is narrower than that intrinsic width. On row 2 (its own row) the\n * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n * container width and wrap its own content (text + link).\n */\n display: flex;\n flex-wrap: wrap;\n gap: var(--kds-spacing-container-0-25x);\n align-items: center;\n min-width: 0;\n margin-left: auto;\n}\n</style>\n","export const kdsPromptInputStatusType = {\n ERROR: \"error\",\n NOTE: \"note\",\n} as const;\n\nexport const kdsPromptInputStatusTypes = Object.values(\n kdsPromptInputStatusType,\n);\n"],"mappings":"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"}