v1.60.0

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}`;

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {

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>
+  );
+}

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 />

app/src/components/Tabs/ThemeTab.tsx

@@ -84,7 +84,21 @@ const Form = createForm<{
       elements: [
         {
           id: "layoutName",
-          title: () => <Graph className="w-5 h-5" />,
+          title: () => (
+            <div className="grid gap-1">
+              <div className="flex items-center gap-2">
+                <Graph className="w-5 h-5" />
+                <span className="font-semibold">
+                  <Trans>Layout Algorithm</Trans>
+                </span>
+              </div>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>
+                  Choose how nodes are automatically arranged in your flowchart
+                </Trans>
+              </span>
+            </div>
+          ),
           label: t`Layout`,
           control: "select",
           value(data) {
@@ -109,7 +123,18 @@ const Form = createForm<{
           ],
         },
         {
-          title: () => t`Direction`,
+          title: () => (
+            <div className="grid gap-1">
+              <span className="font-semibold">
+                <Trans>Direction</Trans>
+              </span>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>
+                  Controls the flow direction of hierarchical layouts
+                </Trans>
+              </span>
+            </div>
+          ),
           id: "klayDirection",
           label: t`Direction`,
           control: "select",