@carbon/ai-chat 1.5.0 → 1.5.1-rc.0

package/dist/es/chat.ChatAppEntry.js

@@ -12075,8 +12075,6 @@ const StopStreamingButton = createComponent({
   react: React
 });
 
-const MAX_AUTO_RESIZE_HEIGHT = 180;
-
 function normalizeTextValue(value) {
   return value.replace(/\r\n?/g, "\n").replace(/\u00a0/g, " ");
 }
@@ -12090,47 +12088,172 @@ function toDisplayHTML(value) {
   return escaped.replace(/\n/g, "<br>");
 }
 
+function getSelectionForElement(element) {
+  const root = element.getRootNode();
+  if (root) {
+    const shadowRoot = root;
+    if (typeof shadowRoot.getSelection === "function") {
+      return shadowRoot.getSelection();
+    }
+  }
+  return window.getSelection();
+}
+
+function getSelectionRangeForElement(element, selection) {
+  if (!selection || selection.rangeCount === 0) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  if (range.commonAncestorContainer !== element && !element.contains(range.commonAncestorContainer)) {
+    return null;
+  }
+  return range;
+}
+
+function createRangeAtEnd(element) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  range.collapse(false);
+  return range;
+}
+
+function placeCaretAtEnd(element, selection) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  const range = createRangeAtEnd(element);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+function calculateAvailableLength(currentText, selectedTextLength, maxLength) {
+  if (maxLength === undefined || maxLength === null) {
+    return undefined;
+  }
+  return Math.max(maxLength - (currentText.length - selectedTextLength), 0);
+}
+
+function truncateToLength(text, maxLength) {
+  if (maxLength === undefined) {
+    return text;
+  }
+  return text.length > maxLength ? text.slice(0, maxLength) : text;
+}
+
+function updateContentAttribute(element, value) {
+  element.dataset.hasContent = value.trim() ? "true" : "false";
+}
+
+function getSelectionRange(element) {
+  const selection = getSelectionForElement(element);
+  return getSelectionRangeForElement(element, selection);
+}
+
+function extractNormalizedText(element, maxLength) {
+  const textValue = normalizeTextValue(element.innerText || "");
+  let nextValue = textValue;
+  let wasTruncated = false;
+  if (maxLength && nextValue.length > maxLength) {
+    nextValue = nextValue.slice(0, maxLength);
+    element.innerText = nextValue;
+    wasTruncated = true;
+  }
+  return {
+    rawValue: nextValue,
+    displayValue: toDisplayHTML(nextValue),
+    wasTruncated
+  };
+}
+
+const MAX_AUTO_RESIZE_HEIGHT = 180;
+
 const ContentEditableInput = forwardRef(({ariaLabel, autoSize, disabled, displayValue, maxLength, rawValue, onBlur, onChange, onFocus, onKeyDown, placeholder, testId}, ref) => {
   const editorRef = useRef(null);
   const sizerRef = useRef(null);
   const skipNextDomSync = useRef(false);
   const lastDisplayValue = useRef("");
-  function setHasContentData(value) {
-    if (!editorRef.current) {
-      return;
-    }
-    editorRef.current.dataset.hasContent = value ? "true" : "false";
-  }
-  function emitChangeFromDom() {
+  const lastRangeRef = useRef(null);
+  const lastNonCollapsedRangeRef = useRef(null);
+  const emitChangeFromDom = useCallback(() => {
     if (!editorRef.current) {
       return;
     }
-    const textValue = normalizeTextValue(editorRef.current.innerText || "");
-    let nextValue = textValue;
-    if (maxLength && nextValue.length > maxLength) {
-      nextValue = nextValue.slice(0, maxLength);
-      editorRef.current.innerText = nextValue;
-      placeCaretAtEnd(editorRef.current);
+    const {rawValue, displayValue, wasTruncated} = extractNormalizedText(editorRef.current, maxLength);
+    if (wasTruncated) {
+      const selection = getSelectionForElement(editorRef.current);
+      placeCaretAtEnd(editorRef.current, selection);
     }
-    setHasContentData(nextValue);
+    updateContentAttribute(editorRef.current, rawValue);
     skipNextDomSync.current = true;
     onChange({
-      rawValue: nextValue,
-      displayValue: toDisplayHTML(nextValue)
+      rawValue,
+      displayValue
     });
-  }
-  function handleInput() {
+  }, [ maxLength, onChange ]);
+  const captureSelection = useCallback(() => {
+    if (!editorRef.current) {
+      return;
+    }
+    const range = getSelectionRange(editorRef.current);
+    if (!range) {
+      return;
+    }
+    lastRangeRef.current = range.cloneRange();
+    if (!range.collapsed) {
+      lastNonCollapsedRangeRef.current = range.cloneRange();
+    }
+  }, []);
+  const handleNativePaste = useCallback(event => {
+    const element = editorRef.current;
+    if (!element) {
+      return;
+    }
+    const clipboardText = event.clipboardData?.getData("text/plain") || "";
+    if (!clipboardText) {
+      return;
+    }
+    event.preventDefault();
+    const normalizedText = normalizeTextValue(clipboardText);
+    const currentText = normalizeTextValue(element.innerText || "");
+    const selection = getSelectionForElement(element);
+    const range = getSelectionRangeForElement(element, selection);
+    const selectedTextLength = range ? normalizeTextValue(range.toString()).length : 0;
+    const available = calculateAvailableLength(currentText, selectedTextLength, maxLength);
+    const textToInsert = truncateToLength(normalizedText, available);
+    if (!textToInsert.length) {
+      return;
+    }
+    document.execCommand("insertText", false, textToInsert);
+    captureSelection();
     emitChangeFromDom();
-  }
-  function handleKeyDown(event) {
-    onKeyDown?.(event);
-  }
-  function handleFocus(event) {
-    onFocus?.(event);
-  }
-  function handleBlur(event) {
-    onBlur?.(event);
-  }
+  }, [ captureSelection, emitChangeFromDom, maxLength ]);
+  useEffect(() => {
+    const element = editorRef.current;
+    if (!element) {
+      return undefined;
+    }
+    const eventHandlers = [ {
+      type: "keydown",
+      handler: captureSelection
+    }, {
+      type: "keyup",
+      handler: captureSelection
+    }, {
+      type: "mouseup",
+      handler: captureSelection
+    }, {
+      type: "paste",
+      handler: handleNativePaste
+    } ];
+    eventHandlers.forEach(({type, handler}) => {
+      element.addEventListener(type, handler);
+    });
+    return () => {
+      eventHandlers.forEach(({type, handler}) => {
+        element.removeEventListener(type, handler);
+      });
+    };
+  }, [ captureSelection, handleNativePaste ]);
   useImperativeHandle(ref, () => ({
     getHTMLElement: () => editorRef.current,
     takeFocus: () => {
@@ -12169,11 +12292,17 @@ const ContentEditableInput = forwardRef(({ariaLabel, autoSize, disabled, display
     } else {
       editorRef.current.innerHTML = "";
     }
-    placeCaretAtEnd(editorRef.current);
+    const selection = getSelectionForElement(editorRef.current);
+    placeCaretAtEnd(editorRef.current, selection);
   }, [ displayValue ]);
   useLayoutEffect(() => {
-    setHasContentData(rawValue);
+    if (editorRef.current) {
+      updateContentAttribute(editorRef.current, rawValue);
+    }
   }, [ rawValue ]);
+  const sizerInnerHTML = useMemo(() => ({
+    __html: rawValue && rawValue.length ? displayValue || "&nbsp;" : escapeHTML(placeholder || " ") || "&nbsp;"
+  }), [ rawValue, displayValue, placeholder ]);
   return React.createElement("div", {
     className: cx("cds-aichat--text-area", {
       "cds-aichat--text-area--auto-size": autoSize,
@@ -12188,10 +12317,10 @@ const ContentEditableInput = forwardRef(({ariaLabel, autoSize, disabled, display
     "data-placeholder": placeholder,
     "data-testid": testId,
     "aria-disabled": disabled,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onInput: handleInput,
-    onKeyDown: handleKeyDown,
+    onBlur,
+    onFocus,
+    onInput: emitChangeFromDom,
+    onKeyDown,
     role: "textbox",
     tabIndex: disabled ? -1 : 0,
     spellCheck: true,
@@ -12203,26 +12332,12 @@ const ContentEditableInput = forwardRef(({ariaLabel, autoSize, disabled, display
     ref: sizerRef,
     className: "cds-aichat--text-area-sizer",
     "aria-hidden": true,
-    dangerouslySetInnerHTML: {
-      __html: rawValue && rawValue.length ? displayValue || "&nbsp;" : escapeHTML(placeholder || " ") || "&nbsp;"
-    }
+    dangerouslySetInnerHTML: sizerInnerHTML
   }));
 });
 
 ContentEditableInput.displayName = "ContentEditableInput";
 
-function placeCaretAtEnd(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return;
-  }
-  const range = document.createRange();
-  range.selectNodeContents(element);
-  range.collapse(false);
-  const selection = window.getSelection();
-  selection?.removeAllRanges();
-  selection?.addRange(range);
-}
-
 const Send = carbonIconToReact(Send16);
 
 const SendFilled = carbonIconToReact(SendFilled16);