@knime/product-features 4.1.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @knime/product-features
 
+## 5.0.0
+
+### Major Changes
+
+- 6c6348b: BREAKING CHANGES:
+
+  - `KdsPromptInput`: replace the `leftSubtext` prop with a `left-subtext` slot, e.g. for an "Auto approve" `KdsToggleSwitch`. Note that there aren't any consumers of `KdsPromptInput` that use the `leftSubtext` prop.
+
+### Minor Changes
+
+- 3bcf7fd: Add the `pageVisitedBilling`, `limitShownBilling`, `limitShownToast`, `upgradeAttemptedBillingPlan` and `upgradeAttemptedBillingLimitBanner` cloudhome analytics events and the `LimitPayload` type.
+- c18be66: - `KdsPromptInput`:
+  - add `secondaryButtonLabel` to the `status` prop, which renders a transparent button in the status banner and emits `statusSecondaryButtonClick` when clicked. It sits left of the action button when `buttonLabel` is set, and also renders on its own without `buttonLabel`. When both buttons are shown and the banner is narrower than 480px, they move onto their own row below the message.
+  - show up to 4 lines of the status message before it scrolls, instead of 2.
+
+### Patch Changes
+
+- Updated dependencies [2352be0]
+  - @knime/utils@2.0.3
+
+## 4.1.1
+
+### Patch Changes
+
+- Updated dependencies [77b4981]
+  - @knime/kds-components@10.0.0
+  - @knime/kds-styles@10.0.0
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/ai.css

@@ -27,8 +27,9 @@
 }
 
 .inline-status-banner {
-&[data-v-89e51df3] {
+&[data-v-6ff09fdb] {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--kds-spacing-container-0-37x);
   align-items: center;
 
@@ -44,40 +45,52 @@
     )
     calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))
     calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));
+  container-type: inline-size;
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.icon-wrapper[data-v-89e51df3],
-  .action[data-v-89e51df3] {
+.icon-wrapper[data-v-6ff09fdb],
+  .actions[data-v-6ff09fdb] {
     flex-shrink: 0;
 }
-.icon-wrapper[data-v-89e51df3] {
+.actions[data-v-6ff09fdb] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    justify-content: flex-end;
+}
+@container (width < 480px) {
+.actions.both-buttons[data-v-6ff09fdb] {
+      flex-basis: 100%;
+}
+}
+.icon-wrapper[data-v-6ff09fdb] {
     display: flex;
     align-items: center;
     height: var(--kds-dimension-component-height-1-5x);
 }
-&.error .icon[data-v-89e51df3] {
+&.error .icon[data-v-6ff09fdb] {
     color: var(--kds-color-text-and-icon-danger);
 }
-&.warning .icon[data-v-89e51df3] {
+&.warning .icon[data-v-6ff09fdb] {
     color: var(--kds-color-text-and-icon-warning);
 }
-&.note .icon[data-v-89e51df3] {
+&.note .icon[data-v-6ff09fdb] {
     color: var(--kds-color-text-and-icon-info);
 }
 }
 .text {
-&[data-v-89e51df3] {
+&[data-v-6ff09fdb] {
   flex: 1 0 0;
   min-width: 0;
 
-  /* Allow up to 2 lines, scroll beyond that. */
-  max-height: calc(2 * 1lh);
+  /* Allow up to 4 lines, scroll beyond that. */
+  max-height: calc(4 * 1lh);
   overflow-y: auto;
   overflow-wrap: anywhere;
   scrollbar-width: thin;
 }
-&[data-v-89e51df3]:focus-visible {
+&[data-v-6ff09fdb]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
@@ -181,13 +194,13 @@
     var(--kds-spacing-container-1x);
 }
 
-.prompt-input[data-v-e3abc825] {
+.prompt-input[data-v-b1453ba4] {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .input-container {
-&[data-v-e3abc825] {
+&[data-v-b1453ba4] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
@@ -201,19 +214,19 @@
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
   }
-&[data-v-e3abc825]:has(textarea:focus:not(:disabled)) {
+&[data-v-b1453ba4]:has(textarea:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-e3abc825]:has(textarea:hover:not(:disabled, :focus)) {
+&[data-v-b1453ba4]:has(textarea:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.disabled[data-v-e3abc825] {
+&.disabled[data-v-b1453ba4] {
     cursor: default;
     border: var(--kds-border-action-disabled);
 }
 }
-.text-input-wrapper[data-v-e3abc825] {
+.text-input-wrapper[data-v-b1453ba4] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -227,7 +240,7 @@
   padding-left: var(--kds-spacing-container-0-37x);
 }
 .text-input {
-&[data-v-e3abc825] {
+&[data-v-b1453ba4] {
   width: 100%;
   min-width: 0;
 
@@ -244,32 +257,32 @@
   background: transparent;
   border: none;
   }
-&[data-v-e3abc825]::placeholder {
+&[data-v-b1453ba4]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-e3abc825] {
+&[data-v-b1453ba4] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     }
-&[data-v-e3abc825]::placeholder {
+&[data-v-b1453ba4]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-e3abc825]::-webkit-scrollbar {
+&[data-v-b1453ba4]::-webkit-scrollbar {
     display: none;
 }
 }
-.action[data-v-e3abc825] {
+.action[data-v-b1453ba4] {
   display: flex;
   flex-shrink: 0;
   align-items: flex-end;
 }
-.progress-bar[data-v-e3abc825] {
+.progress-bar[data-v-b1453ba4] {
   position: absolute;
   inset: -1px 0 auto;
 }
-.subtext[data-v-e3abc825] {
+.subtext[data-v-b1453ba4] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
@@ -279,19 +292,12 @@
   font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.subtext-left[data-v-e3abc825] {
-  /*
-   * Take all remaining inline space so the right block is pushed to the
-   * end. `min-width: 0` lets the ellipsis kick in when the right block
-   * grows past the container width.
-   */
+.subtext-left[data-v-b1453ba4] {
+  /* Take all remaining inline space so the right block is pushed to the end. */
   flex: 1 1 0;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-.subtext-right[data-v-e3abc825] {
+.subtext-right[data-v-b1453ba4] {
   /*
    * On row 1 (alongside .subtext-left) the right block stays at its
    * intrinsic width — line-breaking in flex layout is decided from

package/dist/ai.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { KeepAlive, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, openBlock, reactive, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { KeepAlive, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, openBlock, reactive, ref, renderSlot, toDisplayString, unref, useModel, useSlots, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { KdsButton, KdsCheckbox, KdsCheckboxGroup, KdsIcon, KdsLink, KdsProgressBar, KdsRadioButtonGroup, KdsTextInput } from "@knime/kds-components";
 import './ai.css';//#endregion
 //#region src/ai/KdsPromptInput/AttachableSurface.vue
@@ -31,7 +31,7 @@ var _hoisted_3$3 = {
 var InlineStatusBanner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "InlineStatusBanner",
 	props: { status: {} },
-	emits: ["buttonClick"],
+	emits: ["buttonClick", "secondaryButtonClick"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const statusMapper = {
@@ -52,6 +52,7 @@ var InlineStatusBanner_default = /*#__PURE__*/ _plugin_vue_export_helper_default
 			}
 		};
 		const appearance = computed(() => statusMapper[__props.status.type]);
+		const hasBothButtons = computed(() => Boolean(__props.status.buttonLabel) && Boolean(__props.status.secondaryButtonLabel));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(AttachableSurface_default, { tone: appearance.value.tone }, {
 				default: withCtx(() => [createElementVNode("div", {
@@ -64,20 +65,28 @@ var InlineStatusBanner_default = /*#__PURE__*/ _plugin_vue_export_helper_default
 						class: "icon"
 					}, null, 8, ["name"])]),
 					createElementVNode("span", _hoisted_3$3, toDisplayString(__props.status.message), 1),
-					__props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
+					__props.status.secondaryButtonLabel || __props.status.buttonLabel ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: "action",
+						class: normalizeClass(["actions", { "both-buttons": hasBothButtons.value }])
+					}, [__props.status.secondaryButtonLabel ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 0,
+						size: "small",
+						variant: "transparent",
+						label: __props.status.secondaryButtonLabel,
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("secondaryButtonClick"))
+					}, null, 8, ["label"])) : createCommentVNode("", true), __props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 1,
 						size: "small",
 						variant: "filled",
 						label: __props.status.buttonLabel,
-						onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick"))
-					}, null, 8, ["label"])) : createCommentVNode("", true)
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("buttonClick"))
+					}, null, 8, ["label"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
 				], 10, _hoisted_1$4)]),
 				_: 1
 			}, 8, ["tone"]);
 		};
 	}
-}), [["__scopeId", "data-v-89e51df3"]]);
+}), [["__scopeId", "data-v-6ff09fdb"]]);
 //#endregion
 //#region src/ai/KdsPromptInput/inquiries/PermissionCard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "title" };
@@ -532,7 +541,6 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		},
 		status: { default: () => void 0 },
 		ariaLabel: { default: "Prompt" },
-		leftSubtext: { default: () => void 0 },
 		rightSubtext: { default: () => void 0 },
 		link: { default: () => void 0 },
 		permissions: { default: () => [] },
@@ -545,11 +553,13 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		"submit",
 		"stop",
 		"statusButtonClick",
+		"statusSecondaryButtonClick",
 		"respond"
 	], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const modelValue = useModel(__props, "modelValue");
+		const slots = useSlots();
 		const textareaRef = useTemplateRef("textareaRef");
 		const hasInquiries = computed(() => __props.permissions.length > 0 || __props.questions.length > 0);
 		const isDisabled = computed(() => __props.disabled || hasInquiries.value);
@@ -570,23 +580,24 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				__props.status ? (openBlock(), createBlock(InlineStatusBanner_default, {
 					key: 0,
 					status: __props.status,
-					onButtonClick: _cache[0] || (_cache[0] = ($event) => emit("statusButtonClick"))
+					onButtonClick: _cache[0] || (_cache[0] = ($event) => emit("statusButtonClick")),
+					onSecondaryButtonClick: _cache[1] || (_cache[1] = ($event) => emit("statusSecondaryButtonClick"))
 				}, null, 8, ["status"])) : createCommentVNode("", true),
 				hasInquiries.value ? (openBlock(), createBlock(unref(InquiryStack_default), {
 					key: 1,
 					permissions: __props.permissions,
 					questions: __props.questions,
-					onRespond: _cache[1] || (_cache[1] = ($event) => emit("respond", $event))
+					onRespond: _cache[2] || (_cache[2] = ($event) => emit("respond", $event))
 				}, null, 8, ["permissions", "questions"])) : createCommentVNode("", true),
 				createElementVNode("div", {
 					class: normalizeClass(["input-container", { disabled: isDisabled.value }]),
-					onClick: _cache[4] || (_cache[4] = ($event) => textareaRef.value?.focus())
+					onClick: _cache[5] || (_cache[5] = ($event) => textareaRef.value?.focus())
 				}, [
 					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(KdsProgressBar), { indeterminate: "" })])) : createCommentVNode("", true),
 					createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("textarea", {
 						ref_key: "textareaRef",
 						ref: textareaRef,
-						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
 						class: "text-input",
 						rows: "1",
 						placeholder: __props.placeholder,
@@ -600,7 +611,7 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						"leading-icon": "stop",
 						size: "medium",
 						ariaLabel: "Stop",
-						onClick: _cache[3] || (_cache[3] = withModifiers(($event) => emit("stop"), ["stop"]))
+						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("stop"), ["stop"]))
 					})) : (openBlock(), createBlock(unref(KdsButton), {
 						key: 1,
 						variant: "filled",
@@ -611,7 +622,7 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						onClick: withModifiers(onSubmit, ["stop"])
 					}, null, 8, ["disabled"]))])
 				], 2),
-				__props.leftSubtext || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_6, [__props.leftSubtext ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(__props.leftSubtext), 1)) : createCommentVNode("", true), __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_8, [__props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true), __props.link ? (openBlock(), createBlock(unref(KdsLink), {
+				slots["left-subtext"] || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_6, [slots["left-subtext"] ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "left-subtext", {}, void 0, true)])) : createCommentVNode("", true), __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_8, [__props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true), __props.link ? (openBlock(), createBlock(unref(KdsLink), {
 					key: 1,
 					label: __props.link.label,
 					to: __props.link.to,
@@ -620,7 +631,7 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-e3abc825"]]);
+}), [["__scopeId", "data-v-b1453ba4"]]);
 //#endregion
 //#region src/ai/KdsPromptInput/enums.ts
 var kdsPromptInputStatusType = {