composeai 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -802,6 +802,7 @@ function useComposerContext() {
 }
 function EditorShell({
   placeholder,
+  animated,
   mode,
   variant,
   multiline,
@@ -820,7 +821,11 @@ function EditorShell({
   const editor = slotProps("editor", editorClass, classNames, sx);
   const editorResolved = resolveSx(sx?.editor);
   const placeholderBase = mirrorEditorPadding(editorResolved);
-  const placeholderClass = isCompact ? "composer-placeholder composer-placeholder--compact" : multiline ? "composer-placeholder composer-placeholder--multiline" : "composer-placeholder composer-placeholder--inline";
+  const placeholderClass = cn(
+    isCompact ? "composer-placeholder composer-placeholder--compact" : multiline ? "composer-placeholder composer-placeholder--multiline" : "composer-placeholder composer-placeholder--inline",
+    // Adds the blinking caret after the typewriter text.
+    animated && "composer-placeholder--animated"
+  );
   const placeholderProps = slotProps(
     "placeholder",
     placeholderClass,
@@ -3388,14 +3393,18 @@ function SlashCommandPlugin({ config, onSubmit }) {
     config.trigger ?? "/",
     { minLength: 0, maxLength: 32, allowWhitespace: false }
   );
+  const itemsRef = react.useRef(config.items);
+  itemsRef.current = config.items;
+  const isAsync = !isSyncItems(config.items);
   react.useEffect(() => {
-    if (isSyncItems(config.items)) {
+    const items = itemsRef.current;
+    if (isSyncItems(items)) {
       setIsLoading(false);
       return;
     }
     let cancelled = false;
     setIsLoading(true);
-    Promise.resolve(config.items(query)).then((res) => {
+    Promise.resolve(items(query)).then((res) => {
       if (cancelled) return;
       setAsyncItems(res);
       setIsLoading(false);
@@ -3403,7 +3412,7 @@ function SlashCommandPlugin({ config, onSubmit }) {
     return () => {
       cancelled = true;
     };
-  }, [query, config.items]);
+  }, [query, isAsync]);
   const allItems = react.useMemo(() => {
     return isSyncItems(config.items) ? config.items : asyncItems ?? [];
   }, [config.items, asyncItems]);
@@ -3594,14 +3603,18 @@ function MentionPlugin({ config }) {
     maxLength: 32,
     allowWhitespace: false
   });
+  const itemsRef = react.useRef(config.items);
+  itemsRef.current = config.items;
+  const isAsync = !isSyncItems2(config.items);
   react.useEffect(() => {
-    if (isSyncItems2(config.items)) {
+    const items = itemsRef.current;
+    if (isSyncItems2(items)) {
       setIsLoading(false);
       return;
     }
     let cancelled = false;
     setIsLoading(true);
-    Promise.resolve(config.items(query)).then((res) => {
+    Promise.resolve(items(query)).then((res) => {
       if (cancelled) return;
       setAsyncItems(res);
       setIsLoading(false);
@@ -3609,7 +3622,7 @@ function MentionPlugin({ config }) {
     return () => {
       cancelled = true;
     };
-  }, [query, config.items]);
+  }, [query, isAsync]);
   const allItems = react.useMemo(() => {
     return isSyncItems2(config.items) ? config.items : asyncItems ?? [];
   }, [config.items, asyncItems]);
@@ -4929,6 +4942,107 @@ function useComposerHandle(ref, onSubmit) {
     };
   }, [editor, ref, onSubmit, addFiles]);
 }
+var DEFAULT_TIMING = {
+  typeSpeed: 55,
+  deleteSpeed: 28,
+  holdDuration: 1800,
+  pauseDuration: 450
+};
+function useAnimatedPlaceholder(phrases, enabled, options) {
+  const [state, setState] = react.useState({
+    text: "",
+    active: true
+  });
+  const optsRef = react.useRef({});
+  optsRef.current = options ?? {};
+  const active = enabled && Array.isArray(phrases) && phrases.length > 0;
+  const key = active ? phrases.join("\u241F") : "";
+  const loop = !!options?.loop;
+  const phrasesRef = react.useRef(phrases);
+  phrasesRef.current = phrases;
+  react.useEffect(() => {
+    if (!active) {
+      setState({ text: "", active: true });
+      return;
+    }
+    const list = phrasesRef.current;
+    const lastIdx = list.length - 1;
+    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      setState({ text: list[0], active: false });
+      return;
+    }
+    let timer;
+    let phraseIdx = 0;
+    let charIdx = 0;
+    let phase = "typing";
+    const tick = () => {
+      const timing = { ...DEFAULT_TIMING, ...optsRef.current };
+      const { typeSpeed, deleteSpeed, holdDuration, pauseDuration } = timing;
+      const settleTo = optsRef.current.settleTo;
+      const current = list[phraseIdx];
+      const isLast = phraseIdx === lastIdx;
+      switch (phase) {
+        case "typing": {
+          charIdx += 1;
+          setState({ text: current.slice(0, charIdx), active: true });
+          if (charIdx >= current.length) {
+            phase = "holding";
+            timer = setTimeout(tick, holdDuration);
+          } else {
+            timer = setTimeout(tick, typeSpeed);
+          }
+          break;
+        }
+        case "holding": {
+          if (!loop && isLast) {
+            if (settleTo !== void 0) {
+              phase = "settling";
+              timer = setTimeout(tick, deleteSpeed);
+            } else {
+              setState({ text: current, active: false });
+            }
+          } else {
+            phase = "deleting";
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+        case "deleting": {
+          charIdx -= 1;
+          setState({ text: current.slice(0, Math.max(0, charIdx)), active: true });
+          if (charIdx <= 0) {
+            phase = "pausing";
+            timer = setTimeout(tick, pauseDuration);
+          } else {
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+        case "pausing": {
+          phraseIdx = phraseIdx >= lastIdx ? 0 : phraseIdx + 1;
+          charIdx = 0;
+          phase = "typing";
+          timer = setTimeout(tick, typeSpeed);
+          break;
+        }
+        case "settling": {
+          charIdx -= 1;
+          if (charIdx <= 0) {
+            setState({ text: settleTo ?? "", active: false });
+          } else {
+            setState({ text: current.slice(0, charIdx), active: true });
+            timer = setTimeout(tick, deleteSpeed);
+          }
+          break;
+        }
+      }
+    };
+    timer = setTimeout(tick, DEFAULT_TIMING.typeSpeed);
+    return () => clearTimeout(timer);
+  }, [active, key, loop]);
+  return active ? state : null;
+}
 
 // src/internal/shortcut.ts
 var MODIFIERS = /* @__PURE__ */ new Set([
@@ -5006,6 +5120,7 @@ function matchesShortcut(parsed, event) {
 var Composer = react.forwardRef(function Composer2(props, ref) {
   const {
     placeholder = "Send a message\u2026",
+    animatedPlaceholder,
     onSend,
     onStop,
     isStreaming,
@@ -5035,6 +5150,7 @@ var Composer = react.forwardRef(function Composer2(props, ref) {
     attachmentOptions,
     dir
   } = props;
+  const hasPlaceholder = props.placeholder != null;
   const tokenStyle = react.useMemo(() => {
     const derived = color ? deriveColorTokens(color) : null;
     if (!derived && !tokens) return void 0;
@@ -5078,6 +5194,8 @@ var Composer = react.forwardRef(function Composer2(props, ref) {
               ComposerCard,
               {
                 placeholder,
+                animatedPlaceholder,
+                hasPlaceholder,
                 initialValue,
                 handleRef: ref,
                 onSend,
@@ -5115,6 +5233,8 @@ var RICH_NODES = [
 var PLAIN_NODES = [MentionNode];
 function ComposerCard({
   placeholder,
+  animatedPlaceholder,
+  hasPlaceholder,
   initialValue,
   handleRef,
   onSend,
@@ -5176,6 +5296,8 @@ function ComposerCard({
           ComposerInner,
           {
             placeholder,
+            animatedPlaceholder,
+            hasPlaceholder,
             mode,
             variant,
             multiline,
@@ -5196,6 +5318,8 @@ function ComposerCard({
 }
 function ComposerInner({
   placeholder,
+  animatedPlaceholder,
+  hasPlaceholder,
   mode,
   variant,
   multiline,
@@ -5326,6 +5450,13 @@ function ComposerInner({
     });
   }, [editor, registerRunPrompt, submit]);
   const isCompact = variant === "compact";
+  const animatedPhrases = Array.isArray(animatedPlaceholder) ? animatedPlaceholder : animatedPlaceholder?.phrases;
+  const animatedLoop = Array.isArray(animatedPlaceholder) ? false : !!animatedPlaceholder?.loop;
+  const animatedFrame = useAnimatedPlaceholder(animatedPhrases, !hasText, {
+    loop: animatedLoop,
+    settleTo: hasPlaceholder ? placeholder : void 0
+  });
+  const effectivePlaceholder = animatedFrame?.text ?? placeholder;
   const mermaidActive = multiline && mode === "markdown" && !!features.mermaid;
   const toolbarSlot = /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { extras: toolbarExtras, variant, submit });
   const sendButton = /* @__PURE__ */ jsxRuntime.jsx(
@@ -5349,7 +5480,8 @@ function ComposerInner({
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorShell,
       {
-        placeholder,
+        placeholder: effectivePlaceholder,
+        animated: animatedFrame?.active ?? false,
         mode,
         variant,
         multiline,