@knime/product-features 6.1.2 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @knime/product-features
 
+## 6.3.0
+
+### Minor Changes
+
+- de5f947: - `KdsPromptInput`:
+  - add the `menu` prop, which shows a "+" button with a menu in the bottom left corner of the input, and the `menuItemClick` event.
+  - add the `contextChips` prop, which shows a `KdsChip` per piece of context (e.g. an attached file or a selected node) above the prompt text, and the `contextChipRemove` and `contextChipLabelClick` events.
+  - require `@knime/kds-components` 13.1.0 or newer, for `KdsChip`.
+
+## 6.2.0
+
+### Minor Changes
+
+- 96e525c: `embedding`: Add a new package that establishes the contract for embedding the workflow editor in a shadow root. This package also owns the declaration of features that are injected into the embedded application over the embedding boundary. For more information, refer to the README of the `embedding` package
+
+  `rfcErrors`: `toToast` keeps the error data in `meta.rfcError` (`RFC_ERROR_TOAST_META_KEY`), so the toast can be rebuilt where its component cannot be rendered.
+
 ## 6.1.2
 
 ### Patch Changes

package/README.md

@@ -23,18 +23,19 @@ Peer dependencies: `@knime/kds-components`, `@knime/kds-styles`, `@vueuse/core`,
 This package has **no root export** — import from one of the subpath entry
 points, so consumers only pull in the feature area they use:
 
-| Entry point                                  | Source                     | Contents                                                                    |
-| -------------------------------------------- | -------------------------- | --------------------------------------------------------------------------- |
-| `@knime/product-features/ai`                 | `src/ai`                   | AI assistant building blocks (`KdsPromptInput`)                             |
-| `@knime/product-features/analytics`          | `src/analytics`            | Typed analytics event builders ([README](src/analytics/README.md))          |
-| `@knime/product-features/auth-utils`         | `src/authUtils`            | KNIME Hub auth refresher and auth state ([README](src/authUtils/README.md)) |
-| `@knime/product-features/data-transfer`      | `src/dataTransfer`         | File upload/download progress panels and composables                        |
-| `@knime/product-features/data-transfer/core` | `src/dataTransfer/core.ts` | Framework-agnostic upload managers and upload client                        |
-| `@knime/product-features/embedding-sdk`      | `src/embeddingSDK`         | Host/guest messaging for embedding an application in an iframe              |
-| `@knime/product-features/nodes`              | `src/nodes`                | Node description tabs and node preview                                      |
-| `@knime/product-features/rfc-errors`         | `src/rfcErrors`            | RFC 9457 problem-details error handling and error toasts                    |
-| `@knime/product-features/toasts`             | `src/toasts`               | Toast notifications                                                         |
-| `@knime/product-features/versions`           | `src/versions`             | Version history and create-version form                                     |
+| Entry point                                  | Source                     | Contents                                                                               |
+| -------------------------------------------- | -------------------------- | -------------------------------------------------------------------------------------- |
+| `@knime/product-features/ai`                 | `src/ai`                   | AI assistant building blocks (`KdsPromptInput`)                                        |
+| `@knime/product-features/analytics`          | `src/analytics`            | Typed analytics event builders ([README](src/analytics/README.md))                     |
+| `@knime/product-features/auth-utils`         | `src/authUtils`            | KNIME Hub auth refresher and auth state ([README](src/authUtils/README.md))            |
+| `@knime/product-features/data-transfer`      | `src/dataTransfer`         | File upload/download progress panels and composables                                   |
+| `@knime/product-features/data-transfer/core` | `src/dataTransfer/core.ts` | Framework-agnostic upload managers and upload client                                   |
+| `@knime/product-features/embedding`          | `src/embedding`            | Contract for embedding the editor in a shadow root ([README](src/embedding/README.md)) |
+| `@knime/product-features/embedding-sdk`      | `src/embeddingSDK`         | Host/guest messaging for embedding an application in an iframe                         |
+| `@knime/product-features/nodes`              | `src/nodes`                | Node description tabs and node preview                                                 |
+| `@knime/product-features/rfc-errors`         | `src/rfcErrors`            | RFC 9457 problem-details error handling and error toasts                               |
+| `@knime/product-features/toasts`             | `src/toasts`               | Toast notifications                                                                    |
+| `@knime/product-features/versions`           | `src/versions`             | Version history and create-version form                                                |
 
 ```ts
 // ✅ import from a subpath

package/dist/ai.css

@@ -194,17 +194,17 @@
     var(--kds-spacing-container-1x);
 }
 
-.prompt-input[data-v-b1453ba4] {
+.prompt-input[data-v-7fd4fcfa] {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .input-container {
-&[data-v-b1453ba4] {
+&[data-v-7fd4fcfa] {
   position: relative;
   display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: flex-end;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
   padding: calc(
     var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)
   );
@@ -214,33 +214,30 @@
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
   }
-&[data-v-b1453ba4]:has(textarea:focus:not(:disabled)) {
+&[data-v-7fd4fcfa]:has(textarea:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-b1453ba4]:has(textarea:hover:not(:disabled, :focus)) {
+&[data-v-7fd4fcfa]:has(textarea:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.disabled[data-v-b1453ba4] {
+&.disabled[data-v-7fd4fcfa] {
     cursor: default;
     border: var(--kds-border-action-disabled);
 }
 }
-.text-input-wrapper[data-v-b1453ba4] {
+.context-chips[data-v-7fd4fcfa] {
   display: flex;
-  flex: 1 0 0;
-  align-items: center;
-  min-width: 0;
-
-  /*
-   * Match the Send/Stop button height so a single-line textarea sits
-   * vertically centered against the button.
-   */
-  min-height: var(--kds-dimension-component-height-1-75x);
-  padding-left: var(--kds-spacing-container-0-37x);
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.text-input-wrapper[data-v-7fd4fcfa] {
+  display: flex;
+  min-height: var(--kds-dimension-component-height-2-5x);
+  padding: var(--kds-spacing-container-0-12x);
 }
 .text-input {
-&[data-v-b1453ba4] {
+&[data-v-7fd4fcfa] {
   width: 100%;
   min-width: 0;
 
@@ -257,32 +254,35 @@
   background: transparent;
   border: none;
   }
-&[data-v-b1453ba4]::placeholder {
+&[data-v-7fd4fcfa]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-b1453ba4] {
+&[data-v-7fd4fcfa] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
     }
-&[data-v-b1453ba4]::placeholder {
+&[data-v-7fd4fcfa]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
-&[data-v-b1453ba4]::-webkit-scrollbar {
+&[data-v-7fd4fcfa]::-webkit-scrollbar {
     display: none;
 }
 }
-.action[data-v-b1453ba4] {
+.bottom-row[data-v-7fd4fcfa] {
   display: flex;
-  flex-shrink: 0;
-  align-items: flex-end;
+  align-items: center;
+}
+.action[data-v-7fd4fcfa] {
+  display: flex;
+  margin-left: auto;
 }
-.progress-bar[data-v-b1453ba4] {
+.progress-bar[data-v-7fd4fcfa] {
   position: absolute;
   inset: -1px 0 auto;
 }
-.subtext[data-v-b1453ba4] {
+.subtext[data-v-7fd4fcfa] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
@@ -292,12 +292,12 @@
   font: var(--kds-font-base-subtext-small);
   color: var(--kds-color-text-and-icon-neutral);
 }
-.subtext-left[data-v-b1453ba4] {
+.subtext-left[data-v-7fd4fcfa] {
   /* Take all remaining inline space so the right block is pushed to the end. */
   flex: 1 1 0;
   min-width: 0;
 }
-.subtext-right[data-v-b1453ba4] {
+.subtext-right[data-v-7fd4fcfa] {
   /*
    * 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,6 +1,6 @@
 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, useSlots, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
-import { KdsButton, KdsCheckbox, KdsCheckboxGroup, KdsIcon, KdsLink, KdsProgressBar, KdsRadioButtonGroup, KdsTextInput } from "@knime/kds-components";
+import { Fragment, KeepAlive, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, onMounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { KdsButton, KdsCheckbox, KdsCheckboxGroup, KdsChip, KdsIcon, KdsLink, KdsMenuButton, KdsProgressBar, KdsRadioButtonGroup, KdsTextInput } from "@knime/kds-components";
 import './ai.css';//#endregion
 //#region src/ai/KdsPromptInput/AttachableSurface.vue
 var AttachableSurface_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -505,26 +505,31 @@ var _hoisted_2 = {
 	key: 0,
 	class: "progress-bar"
 };
-var _hoisted_3 = { class: "text-input-wrapper" };
-var _hoisted_4 = [
+var _hoisted_3 = {
+	key: 1,
+	class: "context-chips"
+};
+var _hoisted_4 = { class: "text-input-wrapper" };
+var _hoisted_5 = [
 	"placeholder",
 	"disabled",
 	"aria-label"
 ];
-var _hoisted_5 = { class: "action" };
-var _hoisted_6 = {
+var _hoisted_6 = { class: "bottom-row" };
+var _hoisted_7 = { class: "action" };
+var _hoisted_8 = {
 	key: 2,
 	class: "subtext"
 };
-var _hoisted_7 = {
+var _hoisted_9 = {
 	key: 0,
 	class: "subtext-left"
 };
-var _hoisted_8 = {
+var _hoisted_10 = {
 	key: 1,
 	class: "subtext-right"
 };
-var _hoisted_9 = { key: 0 };
+var _hoisted_11 = { key: 0 };
 //#endregion
 //#region src/ai/KdsPromptInput/KdsPromptInput.vue
 var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -544,7 +549,9 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		rightSubtext: { default: () => void 0 },
 		link: { default: () => void 0 },
 		permissions: { default: () => [] },
-		questions: { default: () => [] }
+		questions: { default: () => [] },
+		menu: { default: () => void 0 },
+		contextChips: { default: () => [] }
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -554,7 +561,10 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		"stop",
 		"statusButtonClick",
 		"statusSecondaryButtonClick",
-		"respond"
+		"respond",
+		"menuItemClick",
+		"contextChipRemove",
+		"contextChipLabelClick"
 	], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
@@ -591,10 +601,21 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				}, null, 8, ["permissions", "questions"])) : createCommentVNode("", true),
 				createElementVNode("div", {
 					class: normalizeClass(["input-container", { disabled: isDisabled.value }]),
-					onClick: _cache[5] || (_cache[5] = ($event) => textareaRef.value?.focus())
+					onClick: _cache[7] || (_cache[7] = ($event) => textareaRef.value?.focus())
 				}, [
 					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(KdsProgressBar), { indeterminate: "" })])) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("textarea", {
+					__props.contextChips.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.contextChips, ({ id, ...chipProps }) => {
+						return openBlock(), createBlock(unref(KdsChip), mergeProps({ key: id }, { ref_for: true }, chipProps, {
+							disabled: isDisabled.value || chipProps.disabled,
+							onRemove: ($event) => emit("contextChipRemove", id),
+							onLabelClick: ($event) => emit("contextChipLabelClick", id)
+						}), null, 16, [
+							"disabled",
+							"onRemove",
+							"onLabelClick"
+						]);
+					}), 128))])) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_4, [withDirectives(createElementVNode("textarea", {
 						ref_key: "textareaRef",
 						ref: textareaRef,
 						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
@@ -604,25 +625,41 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						disabled: isDisabled.value,
 						"aria-label": __props.ariaLabel,
 						onKeydown
-					}, null, 40, _hoisted_4), [[vModelText, modelValue.value]])]),
-					createElementVNode("div", _hoisted_5, [__props.loading ? (openBlock(), createBlock(unref(KdsButton), {
+					}, null, 40, _hoisted_5), [[vModelText, modelValue.value]])]),
+					createElementVNode("div", _hoisted_6, [__props.menu ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "menu",
+						onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
+					}, [createVNode(unref(KdsMenuButton), {
+						variant: "transparent",
+						size: "small",
+						"leading-icon": "plus",
+						ariaLabel: __props.menu.ariaLabel ?? "Add",
+						items: __props.menu.items,
+						disabled: isDisabled.value,
+						onItemClick: _cache[4] || (_cache[4] = ($event) => emit("menuItemClick", $event))
+					}, null, 8, [
+						"ariaLabel",
+						"items",
+						"disabled"
+					])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [__props.loading ? (openBlock(), createBlock(unref(KdsButton), {
 						key: 0,
 						variant: "outlined",
 						"leading-icon": "stop",
-						size: "medium",
+						size: "small",
 						ariaLabel: "Stop",
-						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("stop"), ["stop"]))
+						onClick: _cache[6] || (_cache[6] = withModifiers(($event) => emit("stop"), ["stop"]))
 					})) : (openBlock(), createBlock(unref(KdsButton), {
 						key: 1,
 						variant: "filled",
 						"leading-icon": "send",
-						size: "medium",
+						size: "small",
 						ariaLabel: "Send",
 						disabled: !canSubmit.value,
 						onClick: withModifiers(onSubmit, ["stop"])
-					}, null, 8, ["disabled"]))])
+					}, null, 8, ["disabled"]))])])
 				], 2),
-				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), {
+				slots["left-subtext"] || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_8, [slots["left-subtext"] ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "left-subtext", {}, void 0, true)])) : createCommentVNode("", true), __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_10, [__props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true), __props.link ? (openBlock(), createBlock(unref(KdsLink), {
 					key: 1,
 					label: __props.link.label,
 					to: __props.link.to,
@@ -631,7 +668,7 @@ var KdsPromptInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-b1453ba4"]]);
+}), [["__scopeId", "data-v-7fd4fcfa"]]);
 //#endregion
 //#region src/ai/KdsPromptInput/enums.ts
 var kdsPromptInputStatusType = {