@chrryai/chrry 1.4.60 → 1.4.62

package/Threads.module.scss

@@ -15,11 +15,9 @@
 }
 
 .threadsContainer {
-  opacity: 0;
 }
 
 .threadsItem {
-  opacity: 0;
 }
 
 .characterProfiles {

package/dist/index.js

@@ -1899,7 +1899,7 @@ var init_utils = __esm({
     };
     isFirefox = typeof navigator !== "undefined" && navigator?.userAgent?.includes("Firefox");
     config = getSiteConfig(getClientHostname());
-    VERSION = config.version || "1.4.60";
+    VERSION = config.version || "1.4.62";
     getSlugFromPathname = (path) => {
       return getAppAndStoreSlugs(path, {
         defaultAppSlug: config.slug,
@@ -24196,7 +24196,7 @@ function DataProvider({ children, ...rest }) {
   const [instructions, setInstructions] = (0, import_react21.useState)([]);
   const [affiliateStats, setAffiliateStats] = (0, import_react21.useState)(null);
   const [loadingAffiliateStats, setLoadingAffiliateStats] = (0, import_react21.useState)(false);
-  const VERSION4 = "1.4.60";
+  const VERSION4 = "1.4.62";
   const [weather, setWeather] = useLocalStorage2("weather", user?.weather || guest?.weather || void 0);
   const {
     API_URL: API_URL2,
@@ -34086,7 +34086,7 @@ function Instructions({
   const { FRONTEND_URL: FRONTEND_URL2, API_URL: API_URL2 } = useData();
   const styles4 = useInstructionsStyles();
   const { utilities } = useStyles();
-  const { defaultInstructions, instructions: contextInstructions } = useApp();
+  const { defaultInstructions, isAppInstructions } = useApp();
   const { token, language, user, guest, app, focus, baseApp } = useAuth();
   const {
     selectedAgent,
@@ -35028,7 +35028,7 @@ ${t6(`The more specific you are, the better AI can assist you!`)}`)
       return /* @__PURE__ */ import_react55.default.createElement(
         MotiView,
         {
-          key: instruction.id,
+          key: `instruction-${instruction.id}-isAppInstructions-${isAppInstructions ? "true" : "false"}`,
           from: { opacity: 0, translateY: -10 },
           animate: { opacity: 1, translateY: 0 },
           transition: {
@@ -40564,7 +40564,7 @@ function EmptyStateTips({
   style: style2
 }) {
   const { isManagingApp, canEditApp, app } = useApp();
-  const { reduceMotion: reduceMotionContext } = useTheme2();
+  const { reduceMotion: reduceMotionContext, reduceMotion } = useTheme2();
   const styles4 = useEmptyStateTipsStyles();
   const { t: t6 } = useAppContext();
   const { viewPortHeight } = usePlatform();
@@ -40748,6 +40748,12 @@ function EmptyStateTips({
     if (app?.slug === "vault") return "\u{1F4B0} " + t6("Finance Tips");
     return "\u{1F3AF} " + t6("Pro Tips");
   };
+  const [animationKey, setAnimationKey] = (0, import_react63.useState)(0);
+  (0, import_react63.useEffect)(() => {
+    if (!reduceMotion) {
+      setAnimationKey((prev2) => prev2 + 1);
+    }
+  }, [reduceMotion]);
   return /* @__PURE__ */ import_react63.default.createElement(Section, { style: { ...styles4.emptyStateTips, ...style2 } }, /* @__PURE__ */ import_react63.default.createElement(H3, { style: { marginBottom: 10, marginTop: 0 } }, t6(getAppTitle())), /* @__PURE__ */ import_react63.default.createElement(Div, { style: { ...styles4.ul.style } }, currentTips.map((item, i) => {
     if (viewPortHeight < 600 && i >= 3) return null;
     if (viewPortHeight < 700 && i >= 4) return null;
@@ -40756,7 +40762,7 @@ function EmptyStateTips({
     return /* @__PURE__ */ import_react63.default.createElement(
       MotiView,
       {
-        key: i,
+        key: `tip-${i}-${animationKey}`,
         style: styles4.tip.style,
         from: {
           opacity: 0,
@@ -41037,6 +41043,11 @@ function Menu({
   };
   const timelineListRef = (0, import_react64.useRef)(null);
   const [animationKey, setAnimationKey] = (0, import_react64.useState)(0);
+  (0, import_react64.useEffect)(() => {
+    if (!reduceMotionContext) {
+      setAnimationKey((prev2) => prev2 + 1);
+    }
+  }, [reduceMotionContext]);
   const innerRef = import_react64.default.useRef(null);
   (0, import_react64.useEffect)(() => {
     if (typeof window !== "undefined" && document.addEventListener) {
@@ -41559,9 +41570,6 @@ function Menu({
         title: t6("Motion"),
         onClick: () => {
           setReduceMotion(!reduceMotionContext);
-          if (reduceMotionContext) {
-            setAnimationKey((prev2) => prev2 + 1);
-          }
         },
         style: {
           ...styles4.reduceMotionButton.style,
@@ -42718,7 +42726,7 @@ function SignIn({
   if (isExtension2) {
     return null;
   }
-  return /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, /* @__PURE__ */ import_react68.default.createElement("div", { style: style2, className: (0, import_clsx7.default)(import_SignIn_module.default.container, className) }, !user ? /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, showSignIn && /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, !user ? /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, showSignIn && /* @__PURE__ */ import_react68.default.createElement(
     "button",
     {
       "data-testid": "login-button",
@@ -44752,7 +44760,7 @@ function Skeleton({
             " ",
             "Blossom"
           )),
-          /* @__PURE__ */ React.createElement(Div, { style: { ...skeletonStyles.right.style } }, /* @__PURE__ */ React.createElement(CharacterProfiles, null), /* @__PURE__ */ React.createElement(Subscribe, null), !isMobileDevice ? /* @__PURE__ */ React.createElement(SignIn, { showSignIn: false }) : null, /* @__PURE__ */ React.createElement(LanguageSwitcher_default, null))
+          /* @__PURE__ */ React.createElement(Div, { style: { ...skeletonStyles.right.style } }, /* @__PURE__ */ React.createElement(CharacterProfiles, null), /* @__PURE__ */ React.createElement(Subscribe, null), /* @__PURE__ */ React.createElement(SignIn, { showSignIn: false, showRegister: isMobileDevice }), /* @__PURE__ */ React.createElement(LanguageSwitcher_default, null))
         ),
         /* @__PURE__ */ React.createElement(Div, { style: { ...skeletonStyles.contentContainer.style } }, /* @__PURE__ */ React.createElement(React.Fragment, null, children))
       )
@@ -79751,9 +79759,7 @@ var init_Threads_styles = __esm({
         gap: 20,
         marginTop: 5
       },
-      threadsItem: {
-        opacity: 0
-      },
+      threadsItem: {},
       characterProfiles: {
         display: "flex",
         gap: 5,
@@ -79828,7 +79834,7 @@ var Threads_exports = {};
 __export(Threads_exports, {
   default: () => Threads_default
 });
-var import_react113, import_swr7, import_motion2, Threads, Threads_default;
+var import_react113, import_swr7, Threads, Threads_default;
 var init_Threads = __esm({
   "Threads.tsx"() {
     "use strict";
@@ -79839,7 +79845,7 @@ var init_Threads = __esm({
     import_swr7 = __toESM(require("swr"));
     init_icons();
     init_utils();
-    import_motion2 = require("motion");
+    init_MotiView();
     init_Search();
     init_Skeleton();
     init_EditThread();
@@ -79867,6 +79873,12 @@ var init_Threads = __esm({
         userNameByUrl
       } = useNavigationContext();
       const { reduceMotion } = useTheme2();
+      const [animationKey, setAnimationKey] = (0, import_react113.useState)(0);
+      (0, import_react113.useEffect)(() => {
+        if (!reduceMotion) {
+          setAnimationKey((prev2) => prev2 + 1);
+        }
+      }, [reduceMotion]);
       const {
         token,
         user,
@@ -79947,39 +79959,6 @@ var init_Threads = __esm({
           setIsLoading(false);
         }
       }, [error]);
-      const animateThreads = () => {
-        if (typeof window !== "undefined") {
-          const prefersReducedMotion = reduceMotion || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-          if (prefersReducedMotion) {
-            const menuThreadList = document?.querySelector(".threadList");
-            const menuThreadItems = document?.querySelectorAll(".threadsItem");
-            if (menuThreadList) {
-              ;
-              menuThreadList.style.opacity = "1";
-            }
-            menuThreadItems?.forEach((item) => {
-              ;
-              item.style.opacity = "1";
-            });
-          } else {
-            (0, import_motion2.animate)([
-              [".threadList", { opacity: [0, 1] }, { duration: 0 }],
-              [
-                ".threadsItem",
-                {
-                  y: [-10, 0],
-                  opacity: [0, 1],
-                  transform: ["translateX(-10px)", "none"]
-                },
-                {
-                  delay: (0, import_motion2.stagger)(0.05),
-                  duration: 0.1
-                }
-              ]
-            ]);
-          }
-        }
-      };
       const [isLoadingMore, setIsLoadingMore] = (0, import_react113.useState)(false);
       (0, import_react113.useEffect)(() => {
         if (threadsData && Array.isArray(threadsData.threads)) {
@@ -79987,13 +79966,6 @@ var init_Threads = __esm({
           setIsLoading(false);
         }
       }, [threadsData, user]);
-      (0, import_react113.useEffect)(() => {
-        if (typeof window !== "undefined" && !isLoading && !isLoadingMore && !search) {
-          setTimeout(() => {
-            animateThreads();
-          }, 200);
-        }
-      }, [isLoading, isLoadingMore, search, sortByDate, collaborationStatus]);
       return /* @__PURE__ */ import_react113.default.createElement(Skeleton, null, /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.threads.style } }, /* @__PURE__ */ import_react113.default.createElement(H2, { style: { ...styles4.threadsTitle.style } }, profile?.image ? /* @__PURE__ */ import_react113.default.createElement(
         ImageComponent,
         {
@@ -80104,55 +80076,66 @@ var init_Threads = __esm({
           "data-testid": "threads-container",
           style: { ...styles4.threadsContainer.style }
         },
-        sortedThreads.map((thread2) => /* @__PURE__ */ import_react113.default.createElement(
-          Div,
+        sortedThreads.map((thread2, index) => /* @__PURE__ */ import_react113.default.createElement(
+          MotiView,
           {
-            "data-testid": "threads-item",
-            ref: (el) => {
-              threadRefs.current[thread2.id] = el;
-            },
-            className: "threadsItem",
-            key: thread2.id
+            key: `${thread2.id}-${animationKey}`,
+            from: { opacity: 0, translateY: 0, translateX: -10 },
+            animate: { opacity: 1, translateY: 0, translateX: 0 },
+            transition: {
+              duration: reduceMotion ? 0 : 100,
+              delay: reduceMotion ? 0 : index * 50
+            }
           },
-          /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.threadItemTitle.style } }, !isVisitor && /* @__PURE__ */ import_react113.default.createElement(
-            EditThread,
+          /* @__PURE__ */ import_react113.default.createElement(
+            Div,
             {
-              refetch: async () => {
-                await refetch();
+              "data-testid": "threads-item",
+              ref: (el) => {
+                threadRefs.current[thread2.id] = el;
               },
-              isIcon: true,
-              thread: thread2
-            }
-          ), (() => {
-            const url = `/threads/${thread2.id}`;
-            return /* @__PURE__ */ import_react113.default.createElement(
-              A,
+              className: "threadsItem"
+            },
+            /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.threadItemTitle.style } }, !isVisitor && /* @__PURE__ */ import_react113.default.createElement(
+              EditThread,
               {
-                "data-testid": "threads-item-title",
-                onClick: (e) => {
-                  if (e.metaKey || e.ctrlKey) {
-                    return;
-                  }
-                  e.preventDefault();
-                  router.push(url);
+                refetch: async () => {
+                  await refetch();
                 },
-                href: url,
-                key: thread2.id
-              },
-              thread2.title
-            );
-          })(), !isVisitor && /* @__PURE__ */ import_react113.default.createElement(
-            Bookmark,
-            {
-              dataTestId: "threads",
-              onSave: () => {
-                refetch();
-                refetchThreads();
-              },
-              thread: thread2
-            }
-          ), /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.right.style } }, /* @__PURE__ */ import_react113.default.createElement(Span, { style: { ...styles4.threadItemDate.style } }, timeAgo2(thread2.createdOn, language)), !isVisitor && /* @__PURE__ */ import_react113.default.createElement(Share3, { thread: thread2, size: 13 }))),
-          /* @__PURE__ */ import_react113.default.createElement(Span, { style: { ...styles4.threadAiResponse.style } }, thread2.aiResponse)
+                isIcon: true,
+                thread: thread2
+              }
+            ), (() => {
+              const url = `/threads/${thread2.id}`;
+              return /* @__PURE__ */ import_react113.default.createElement(
+                A,
+                {
+                  "data-testid": "threads-item-title",
+                  onClick: (e) => {
+                    if (e.metaKey || e.ctrlKey) {
+                      return;
+                    }
+                    e.preventDefault();
+                    router.push(url);
+                  },
+                  href: url,
+                  key: thread2.id
+                },
+                thread2.title
+              );
+            })(), !isVisitor && /* @__PURE__ */ import_react113.default.createElement(
+              Bookmark,
+              {
+                dataTestId: "threads",
+                onSave: () => {
+                  refetch();
+                  refetchThreads();
+                },
+                thread: thread2
+              }
+            ), /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.right.style } }, /* @__PURE__ */ import_react113.default.createElement(Span, { style: { ...styles4.threadItemDate.style } }, timeAgo2(thread2.createdOn, language)), !isVisitor && /* @__PURE__ */ import_react113.default.createElement(Share3, { thread: thread2, size: 13 }))),
+            /* @__PURE__ */ import_react113.default.createElement(Span, { style: { ...styles4.threadAiResponse.style } }, thread2.aiResponse)
+          )
         )),
         threads.threads.length === 0 && /* @__PURE__ */ import_react113.default.createElement(P, null, t6("Nothing here yet")),
         threads.hasNextPage && /* @__PURE__ */ import_react113.default.createElement(Div, { style: { ...styles4.loadMoreButtonContainer.style } }, /* @__PURE__ */ import_react113.default.createElement(