Fix input autoresize functionality

Author: jcheng5

R/chat.R

@@ -13,9 +13,12 @@ chat_deps <- function() {
     "shinychat",
     utils::packageVersion("shinychat"),
     package = "shinychat",
-    src = "chat",
-    script = list(src = "chat.js", type = "module"),
-    stylesheet = "chat.css"
+    src = "lib/shiny",
+    script = list(
+      list(src = "chat/chat.js", type = "module"),
+      list(src = "text-area/textarea-autoresize.js", type = "module")
+    ),
+    stylesheet = c("chat/chat.css", "text-area/textarea-autoresize.css")
   )
 }
 

inst/chat/GIT_VERSION

@@ -0,0 +1 @@
+005b556bbcec0c5d50a96df5128771aedcf5f0cc

inst/lib/shiny/GIT_VERSION

@@ -0,0 +1,7 @@
+/* text-area/textarea-autoresize.css */
+.textarea-autoresize textarea.form-control {
+  padding: 5px 8px;
+  resize: none;
+  overflow-y: hidden;
+  height: auto;
+}

inst/chat/chat.css renamed to inst/lib/shiny/chat/chat.css

@@ -0,0 +1,52 @@
+// text-area/textarea-autoresize.ts
+function onDelegatedEvent(eventName, selector, callback) {
+  document.addEventListener(eventName, (e) => {
+    const e2 = e;
+    if (e2.target.matches(selector)) {
+      callback(e2.target);
+    }
+  });
+}
+var textAreaIntersectionObserver = null;
+function callUpdateHeightWhenTargetIsVisible(target) {
+  if (textAreaIntersectionObserver === null) {
+    textAreaIntersectionObserver = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+          textAreaIntersectionObserver.unobserve(entry.target);
+          update_height(entry.target);
+        });
+      }
+    );
+  }
+  textAreaIntersectionObserver.observe(target);
+}
+function update_height(target) {
+  if (target.scrollHeight > 0) {
+    target.style.height = "auto";
+    target.style.height = target.scrollHeight + "px";
+  } else {
+    callUpdateHeightWhenTargetIsVisible(target);
+  }
+}
+onDelegatedEvent(
+  "input",
+  "textarea.textarea-autoresize",
+  (target) => {
+    update_height(target);
+  }
+);
+function update_on_load() {
+  if (document.readyState === "loading") {
+    setTimeout(update_on_load, 10);
+    return;
+  }
+  const textAreas = document.querySelectorAll(
+    "textarea.textarea-autoresize"
+  );
+  textAreas.forEach(update_height);
+}
+update_on_load();

inst/chat/chat.css.map renamed to inst/lib/shiny/chat/chat.css.map

@@ -1,13 +1,14 @@
 #!/usr/bin/env bash
 
 set -e
+set -x
 
 # This script downloads new chat CSS/JS assets from py-shiny, and stamps the
 # directory with a GIT_VERSION.
 
 REPO_URL="https://github.com/posit-dev/py-shiny.git"
-DIRECTORY="shiny/www/py-shiny/chat"
 BRANCH=chat-append-incremental
+DEST_DIR="inst/lib/shiny"
 
 if [ ! -f "shinychat.Rproj" ]; then
   echo "Error: You must execute this script from the repo root (./scripts/update-chat.sh)."
@@ -17,12 +18,9 @@ fi
 # Clone the repository with sparse-checkout enabled
 git clone -b "$BRANCH" --depth 1 "$REPO_URL" repo_tmp
 
-# Conservatively delete the existing
-rm -f inst/chat/GIT_VERSION inst/chat/chat.css inst/chat/chat.css.map inst/chat/chat.js inst/chat/chat.js
-if [ -d chat ]; then
-    rm -r chat
-fi
-
-cp -R "repo_tmp/$DIRECTORY" ./inst/
-(cd repo_tmp && git rev-parse HEAD > ../inst/chat/GIT_VERSION)
-rm -rf repo_tmp
+rm -rf "$DEST_DIR"
+mkdir -p "$DEST_DIR"
+cp -R "repo_tmp/shiny/www/py-shiny/chat" "$DEST_DIR/chat"
+cp -R "repo_tmp/shiny/www/py-shiny/text-area" "$DEST_DIR/text-area"
+(cd repo_tmp; git rev-parse HEAD) > "${DEST_DIR}/GIT_VERSION"
+rm -rf repo_tmp