Add right-click node editing instruction (#759)

* Add right-click node editing instruction * Add translations * Increase free generations
tone-row · Nov 23, 2024 · 9e0107b · 9e0107b
1 parent 3b59288
commit 9e0107b
Show file tree

Hide file tree

Showing 19 changed files with 87 additions and 9 deletions.
diff --git a/api/prompt/_shared.ts b/api/prompt/_shared.ts
@@ -39,7 +39,7 @@ export async function handleRateLimit(
     redis: kv,
     limiter: isPro
       ? Ratelimit.slidingWindow(3, "1m")
-      : Ratelimit.fixedWindow(2, "30d"),
+      : Ratelimit.fixedWindow(3, "15d"),
   });
 
   const rateLimitKey = isPro ? `pro_${customerId}` : `unauth_${ip}`;

diff --git a/app/src/components/GraphTip.tsx b/app/src/components/GraphTip.tsx
@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { X } from "phosphor-react";
+import { Trans } from "@lingui/macro";
+
+export function GraphTip() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isFading, setIsFading] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsFading(true);
+    }, 10000);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={`
+        absolute top-4 left-4 
+        max-w-[200px]
+        text-xs text-gray-500/60 dark:text-gray-400/60
+        transition-opacity duration-1000
+        ${isFading ? "opacity-0" : "opacity-100"}
+      `}
+      onTransitionEnd={() => {
+        if (isFading) setIsVisible(false);
+      }}
+    >
+      <Trans>
+        Pro tip: Right-click any node to customize its shape and color
+      </Trans>
+      <button
+        onClick={() => setIsFading(true)}
+        className="inline-block ml-1 text-gray-400/60 hover:text-gray-600 dark:hover:text-gray-300"
+        aria-label="Close tip"
+      >
+        <X size={12} />
+      </button>
+    </div>
+  );
+}
diff --git a/app/src/components/GraphWrapper.tsx b/app/src/components/GraphWrapper.tsx
@@ -7,6 +7,7 @@ import styles from "./GraphWrapper.module.css";
 import Loading from "./Loading";
 import TextResizer from "./TextResizer";
 import classNames from "classnames";
+import { GraphTip } from "./GraphTip";
 
 export default function GraphWrapper({
   children,
@@ -36,6 +37,7 @@ export default function GraphWrapper({
           >
             {children}
             <GraphFloatingMenu />
+            <GraphTip />
           </Box>
         )}
         <TextResizer />

diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js
diff --git a/app/src/locales/de/messages.po b/app/src/locales/de/messages.po
@@ -1166,6 +1166,10 @@ msgstr "Priorisierte Einzelunterstützung"
 msgid "Privacy Policy"
 msgstr "Datenschutzerklärung"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "Pro-Tipp: Klicken Sie mit der rechten Maustaste auf einen Knoten, um seine Form und Farbe anzupassen."
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "Datenverarbeitung"

diff --git a/app/src/locales/en/messages.js b/app/src/locales/en/messages.js
diff --git a/app/src/locales/en/messages.po b/app/src/locales/en/messages.po
@@ -1166,6 +1166,10 @@ msgstr "Priority One-on-One Support"
 msgid "Privacy Policy"
 msgstr "Privacy Policy"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "Pro tip: Right-click any node to customize its shape and color"
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "Processing Data"

diff --git a/app/src/locales/es/messages.js b/app/src/locales/es/messages.js
diff --git a/app/src/locales/es/messages.po b/app/src/locales/es/messages.po
@@ -1166,6 +1166,10 @@ msgstr "Soporte prioritario uno a uno"
 msgid "Privacy Policy"
 msgstr "Política de privacidad"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "Consejo profesional: Haz clic derecho en cualquier nodo para personalizar su forma y color"
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "Procesamiento de datos"

diff --git a/app/src/locales/fr/messages.js b/app/src/locales/fr/messages.js
diff --git a/app/src/locales/fr/messages.po b/app/src/locales/fr/messages.po
@@ -1166,6 +1166,10 @@ msgstr "Support prioritaire en tête-à-tête"
 msgid "Privacy Policy"
 msgstr "Politique de confidentialité"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "Astuce pro : faites un clic droit sur n'importe quel noeud pour personnaliser sa forme et sa couleur"
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "Traitement des données"

diff --git a/app/src/locales/hi/messages.js b/app/src/locales/hi/messages.js
diff --git a/app/src/locales/hi/messages.po b/app/src/locales/hi/messages.po
@@ -1166,6 +1166,10 @@ msgstr "प्राथमिकता वाला एक-से-एक सम
 msgid "Privacy Policy"
 msgstr "गोपनीयता नीति "
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "प्रो टिप: किसी भी नोड पर दायां-तीर क्लिक करें और उसकी आकृति और रंग को अनुकूलित करें।"
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "डेटा प्रसंस्करण"

diff --git a/app/src/locales/ko/messages.js b/app/src/locales/ko/messages.js
diff --git a/app/src/locales/ko/messages.po b/app/src/locales/ko/messages.po
@@ -1166,6 +1166,10 @@ msgstr "우선순위 일대일 지원"
 msgid "Privacy Policy"
 msgstr "개인정보보호정책"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "팁: 노드를 우클릭하여 모양과 색상을 사용자 정의할 수 있습니다."
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "데이터 처리"

diff --git a/app/src/locales/pt-br/messages.js b/app/src/locales/pt-br/messages.js
diff --git a/app/src/locales/pt-br/messages.po b/app/src/locales/pt-br/messages.po
@@ -1166,6 +1166,10 @@ msgstr "Suporte prioritário um a um"
 msgid "Privacy Policy"
 msgstr "Política de Privacidade"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "Dica profissional: Clique com o botão direito em qualquer nó para personalizar sua forma e cor."
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "Processando Dados"

diff --git a/app/src/locales/zh/messages.js b/app/src/locales/zh/messages.js
diff --git a/app/src/locales/zh/messages.po b/app/src/locales/zh/messages.po
@@ -1166,6 +1166,10 @@ msgstr "优先一对一支持"
 msgid "Privacy Policy"
 msgstr "隱私政策"
 
+#: src/components/GraphTip.tsx:32
+msgid "Pro tip: Right-click any node to customize its shape and color"
+msgstr "专业提示：右键点击任何节点可自定义其形状和颜色"
+
 #: src/components/ImportDataDialog.tsx:265
 msgid "Processing Data"
 msgstr "处理数据"