@jskit-ai/assistant-core 0.2.6 → 0.2.8

package/src/client/conversation/useAssistantQuestions.js

@@ -2,7 +2,13 @@ import { computed, ref, toValue, watch } from "vue";
 import { numberedQuestionSubmissionText, parseNumberedQuestionPrompt } from "../../shared/conversation/numberedQuestionSugar.js";
 import { parseAnswerChoicePrompt } from "../../shared/conversation/answerChoiceSugar.js";
 
-/** Ordinary chat answer fields; the caller owns authorized message selection and delivery. */
+/**
+ * Ordinary chat answer fields; the caller owns authorized message selection and delivery.
+ * @param {{
+ *   message?: import("vue").MaybeRefOrGetter<string>,
+ *   extraChoice?: import("vue").MaybeRefOrGetter<{ value: string, title?: string } | null>
+ * }} [options]
+ */
 function useAssistantQuestions({ message = "", extraChoice = null } = {}) {
   const questionText = computed(() => String(toValue(message) || ""));
   const answers = ref({});
@@ -69,8 +75,15 @@ function useAssistantQuestions({ message = "", extraChoice = null } = {}) {
     choice.value = "";
   });
 
-  return { questions, selectItems, choices, answers, choice, active, capture, markSubmitted, dismiss, reset,
-    setAnswers(value) { answers.value = value; }, setChoice(value) { choice.value = value; } };
+  function setAnswers(value) {
+    answers.value = value;
+  }
+
+  function setChoice(value) {
+    choice.value = value;
+  }
+
+  return { questions, selectItems, choices, answers, choice, active, capture, markSubmitted, dismiss, reset, setAnswers, setChoice };
 }
 
 export { useAssistantQuestions };

package/src/client/conversation/useAssistantSuggestions.js

@@ -3,11 +3,24 @@ import { useJskitText } from "../i18n.js";
 
 const { serverMessage } = useJskitText();
 
-/** Suggestion requests use an application-supplied agent; credentials stay on its server. */
+/**
+ * Suggestion requests use an application-supplied agent; credentials stay on its server.
+ * @param {{
+ *   active?: import("vue").MaybeRefOrGetter<boolean>,
+ *   requestKey?: import("vue").MaybeRefOrGetter<unknown>,
+ *   draft?: import("vue").MaybeRefOrGetter<string>,
+ *   configuration?: import("vue").MaybeRefOrGetter<object>,
+ *   generate?: import("vue").MaybeRef<((input: { draft: string, configuration: object, signal: AbortSignal }) =>
+ *     Promise<{ label: string, prompt: string }[]>) | null>,
+ *   onSelect?: (prompt: string) => boolean | void,
+ *   debounceMs?: import("vue").MaybeRefOrGetter<number>,
+ *   minIntervalMs?: import("vue").MaybeRefOrGetter<number>
+ * }} options
+ */
 export function useAssistantSuggestions({
   active = true, requestKey = "", draft = "", configuration = {},
   generate, onSelect = () => false, debounceMs = 750, minIntervalMs = 0
-} = {}) {
+}) {
   const items = ref([]);
   const loading = ref(false);
   const preview = ref("");
@@ -17,6 +30,7 @@ export function useAssistantSuggestions({
   const currentDraft = computed(() => String(toValue(draft) ?? "").trim());
   const configurationKey = computed(() => JSON.stringify(toValue(configuration) ?? {}));
   const key = computed(() => JSON.stringify([toValue(requestKey), currentDraft.value, configurationKey.value]));
+  // readable-check: allow method-probe - optional operation: without a generator, or while its ref holds none, no suggestions are requested
   const eligible = computed(() => toValue(active) !== false && typeof unref(generate) === "function" && dismissedKey.value !== key.value);
   const visible = computed(() => eligible.value && (loading.value || items.value.length > 0));
   let timer;

package/src/client/conversation/useScrollToBottom.js

@@ -1,4 +1,5 @@
 import { nextTick, onBeforeUnmount, unref } from "vue";
+import { hasWindowFunction, waitForLayoutFrame } from "../browser.js";
 
 const DEFAULT_SETTLE_DELAYS_MS = [0, 80];
 
@@ -6,25 +7,12 @@ function readElement(value) {
   return unref(value) || null;
 }
 
-function hasWindowTimer(name) {
-  return typeof window !== "undefined" && typeof window[name] === "function";
-}
-
-function waitForLayoutFrame() {
-  if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve) => {
-    window.requestAnimationFrame(resolve);
-  });
-}
-
 function normalizedScrollBehavior(value = "") {
   return value === "smooth" ? "smooth" : "auto";
 }
 
 function scrollElementToBottom(targetElement, behavior = "auto") {
+  // readable-check: allow method-probe - platform object: an older browser's elements have no scrollTo()
   if (behavior === "smooth" && typeof targetElement.scrollTo === "function") {
     targetElement.scrollTo({
       behavior,
@@ -35,13 +23,23 @@ function scrollElementToBottom(targetElement, behavior = "auto") {
   targetElement.scrollTop = targetElement.scrollHeight;
 }
 
+/**
+ * Scrolls `target` to its end now, after the next layout, and again after each settle delay, while `enabled`.
+ * @param {{
+ *   anchor?: import("vue").MaybeRef<Element | null>,
+ *   enabled?: import("vue").MaybeRef<boolean>,
+ *   scrollAnchorIntoView?: boolean,
+ *   settleDelaysMs?: number[],
+ *   target: import("vue").MaybeRef<Element | null>
+ * }} options
+ */
 function useScrollToBottom({
   anchor = null,
   enabled = true,
   scrollAnchorIntoView = true,
   settleDelaysMs = DEFAULT_SETTLE_DELAYS_MS,
   target
-} = {}) {
+}) {
   const scheduledTimers = new Set();
   let disposed = false;
   let scheduleVersion = 0;
@@ -51,7 +49,7 @@ function useScrollToBottom({
   }
 
   function clearScheduledTimers() {
-    if (hasWindowTimer("clearTimeout")) {
+    if (hasWindowFunction("clearTimeout")) {
       scheduledTimers.forEach((timer) => {
         window.clearTimeout(timer);
       });
@@ -64,7 +62,7 @@ function useScrollToBottom({
     clearScheduledTimers();
   }
 
-  function scrollNow(options = {}) {
+  function scrollNow(options) {
     if (disposed || !isEnabled()) {
       return;
     }
@@ -83,7 +81,7 @@ function useScrollToBottom({
       if (behavior === "smooth") {
         anchorOptions.behavior = behavior;
       }
-      readElement(anchor)?.scrollIntoView?.(anchorOptions);
+      readElement(anchor)?.scrollIntoView(anchorOptions);
     }
     scrollElementToBottom(targetElement, behavior);
   }
@@ -93,7 +91,7 @@ function useScrollToBottom({
       disposed ||
       version !== scheduleVersion ||
       !isEnabled() ||
-      !hasWindowTimer("setTimeout")
+      !hasWindowFunction("setTimeout")
     ) {
       return;
     }

package/src/client/conversation/useTextareaAutoGrow.js

@@ -0,0 +1,115 @@
+import { onBeforeUnmount, onMounted, watch } from "vue";
+
+/**
+ * Grows the prompt's textarea with its text, up to its CSS max-height, after each change of its model value,
+ * placeholder, rows or density and each change of its width. preserveHeightForNextModelValue() keeps the current
+ * height through the next model value change; typing ends that hold.
+ * @param {{
+ *   autoGrow: boolean,
+ *   density: string,
+ *   modelValue: string,
+ *   placeholder: string,
+ *   placeholderAffectsHeight: boolean,
+ *   rows: number | string
+ * }} props The prompt input's props.
+ * @param {import("vue").Ref<HTMLTextAreaElement | null>} textareaRef
+ */
+function useTextareaAutoGrow(props, textareaRef) {
+  let resizeFrame = 0;
+  let resizeObserver = null;
+  let preserveHeightForNextModelValueChange = false;
+
+  function resizeTextarea() {
+    if (!props.autoGrow) {
+      return;
+    }
+    const textarea = textareaRef.value;
+    if (!textarea) {
+      return;
+    }
+    if (!props.placeholderAffectsHeight && !textarea.value) {
+      return;
+    }
+    const style = window.getComputedStyle(textarea);
+    const minHeight = Number.parseFloat(style.minHeight) || 0;
+    const maxHeight = Number.parseFloat(style.maxHeight) || Number.POSITIVE_INFINITY;
+    textarea.style.height = "auto";
+    const contentHeight = Math.max(textarea.scrollHeight, minHeight);
+    const targetHeight = Math.min(contentHeight, maxHeight);
+    textarea.style.height = `${targetHeight}px`;
+    textarea.style.overflowY = contentHeight > targetHeight + 1 ? "auto" : "hidden";
+  }
+
+  function queueResizeTextarea() {
+    if (!props.autoGrow || typeof window === "undefined") {
+      return;
+    }
+    if (resizeFrame) return;
+    resizeFrame = window.requestAnimationFrame(() => {
+      resizeFrame = 0;
+      resizeTextarea();
+    });
+  }
+
+  function preserveHeightForNextModelValue() {
+    const textarea = textareaRef.value;
+    if (!props.autoGrow || !textarea) {
+      return false;
+    }
+    if (resizeFrame) {
+      window.cancelAnimationFrame(resizeFrame);
+      resizeFrame = 0;
+    }
+    preserveHeightForNextModelValueChange = true;
+    textarea.style.height = `${textarea.getBoundingClientRect().height}px`;
+    textarea.style.overflowY = "auto";
+    return true;
+  }
+
+  /** Typing writes the model value itself, so its next change resizes the textarea again. */
+  function releasePreservedHeight() {
+    preserveHeightForNextModelValueChange = false;
+  }
+
+  onMounted(() => {
+    queueResizeTextarea();
+    let lastWidth = 0;
+    resizeObserver = new ResizeObserver(([entry]) => {
+      // Height changes are our own output. Only width changes need another layout.
+      const width = entry.contentRect.width;
+      if (width !== lastWidth) {
+        lastWidth = width;
+        queueResizeTextarea();
+      }
+    });
+    resizeObserver.observe(textareaRef.value);
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    if (resizeFrame && typeof window !== "undefined") {
+      window.cancelAnimationFrame(resizeFrame);
+      resizeFrame = 0;
+    }
+  });
+
+  watch(() => [
+    props.autoGrow,
+    props.modelValue,
+    props.placeholder,
+    props.placeholderAffectsHeight,
+    props.rows,
+    props.density
+  ], (values, previousValues = []) => {
+    const modelValueChanged = values[1] !== previousValues[1];
+    if (preserveHeightForNextModelValueChange && modelValueChanged) {
+      preserveHeightForNextModelValueChange = false;
+      return;
+    }
+    queueResizeTextarea();
+  }, { flush: "post" });
+
+  return { preserveHeightForNextModelValue, queueResizeTextarea, releasePreservedHeight };
+}
+
+export { useTextareaAutoGrow };