yaver-feedback-react-native 0.7.16 → 0.8.0

package/src/QuickActionIcon.tsx

@@ -0,0 +1,332 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  DeviceEventEmitter,
+  Dimensions,
+  NativeModules,
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { YaverFeedback } from './YaverFeedback';
+import { getQuickIconDisabled, setQuickIconDisabled } from './preferences';
+
+// Mirror the suppression rule used by YaverFeedback + ShakeDetector:
+// when loaded through Yaver's super-host Hermes bundle, the host owns
+// shake + reload UX. We must not render a second action surface.
+function isRunningInsideYaverHost(): boolean {
+  try {
+    return !!(NativeModules as any)?.YaverInfo;
+  } catch {
+    return false;
+  }
+}
+
+const DEFAULT_SIZE = 44;
+const DEFAULT_COLOR = '#6366f1';
+const LONG_PRESS_MS = 550;
+
+export interface QuickActionIconProps {
+  /** Override the color from FeedbackConfig.quickIconColor. */
+  color?: string;
+  /** Override the initial position from FeedbackConfig.quickIconInitialPosition. */
+  initialPosition?: { x: number; y: number };
+  /** Override the icon diameter. Default 44. */
+  size?: number;
+}
+
+/**
+ * Small tap-to-open icon for the Yaver Feedback SDK.
+ *
+ * Default UX:
+ *  - **Tap** opens the feedback modal (same as shake).
+ *  - **Long-press** (~550ms) opens a menu with "Open feedback" and
+ *    "Hide icon". Hiding is persisted to AsyncStorage so the user's
+ *    decision survives app relaunches.
+ *  - **Drag** repositions the icon.
+ *
+ * Shake always keeps working independently — even when the icon is
+ * hidden the user can still shake to open feedback.
+ *
+ * Visibility is controlled by `FeedbackConfig.quickIcon`:
+ *  - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+ *  - `'always'` → visible from first render.
+ *  - `'after-shake'` → hidden until `yaverFeedback:firstShake` fires.
+ *  - `'off'` → never rendered.
+ *
+ * Suppressed entirely when the SDK is loaded inside Yaver's super-host
+ * (the Yaver mobile app owns the shake gesture + overlay in that case).
+ */
+export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
+  color: colorProp,
+  initialPosition: initialPositionProp,
+  size = DEFAULT_SIZE,
+}) => {
+  const config = YaverFeedback.getConfig();
+
+  const mode: 'always' | 'after-shake' | 'off' = (() => {
+    const raw = config?.quickIcon ?? 'auto';
+    if (raw === 'auto') {
+      return Platform.OS === 'web' ? 'off' : 'always';
+    }
+    return raw;
+  })();
+
+  const color = colorProp ?? config?.quickIconColor ?? DEFAULT_COLOR;
+
+  const { width, height } = Dimensions.get('window');
+  const defaultStart =
+    initialPositionProp ??
+    config?.quickIconInitialPosition ?? {
+      x: Math.max(width - size - 14, 0),
+      y: Math.max(Math.floor(height * 0.35), 80),
+    };
+
+  const pan = useRef(new Animated.ValueXY(defaultStart)).current;
+  const lastPos = useRef(defaultStart);
+  const dragStart = useRef<{ x: number; y: number } | null>(null);
+  const didDrag = useRef(false);
+
+  const [userDisabled, setUserDisabled] = useState<boolean | null>(null);
+  const [shakenThisSession, setShakenThisSession] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [hostSuppressed] = useState<boolean>(() => isRunningInsideYaverHost());
+
+  // Load the persisted disable flag once on mount. Until it resolves we
+  // render nothing — a one-frame flash of the icon before hiding would
+  // be worse than a tiny delayed appearance.
+  useEffect(() => {
+    let alive = true;
+    getQuickIconDisabled().then((v) => {
+      if (alive) setUserDisabled(v);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // `after-shake` mode waits for the first shake before revealing
+  // itself. YaverFeedback emits this event from its shake callback.
+  useEffect(() => {
+    const sub = DeviceEventEmitter.addListener(
+      'yaverFeedback:firstShake',
+      () => setShakenThisSession(true),
+    );
+    return () => sub.remove();
+  }, []);
+
+  // Programmatic control: host apps can call
+  // `YaverFeedback.setQuickIconVisible(true)` to re-surface the icon
+  // after the user hid it (e.g. from a settings screen).
+  useEffect(() => {
+    const showSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:quickIconShow',
+      () => {
+        setUserDisabled(false);
+        void setQuickIconDisabled(false);
+      },
+    );
+    const hideSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:quickIconHide',
+      () => {
+        setUserDisabled(true);
+        void setQuickIconDisabled(true);
+        setMenuOpen(false);
+      },
+    );
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, g) =>
+        Math.abs(g.dx) > 3 || Math.abs(g.dy) > 3,
+      onPanResponderGrant: () => {
+        didDrag.current = false;
+        dragStart.current = { ...lastPos.current };
+        pan.setOffset({ x: lastPos.current.x, y: lastPos.current.y });
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: (_, g) => {
+        if (Math.abs(g.dx) > 3 || Math.abs(g.dy) > 3) {
+          didDrag.current = true;
+        }
+        Animated.event([null, { dx: pan.x, dy: pan.y }], {
+          useNativeDriver: false,
+        })(_, g);
+      },
+      onPanResponderRelease: (_, g) => {
+        pan.flattenOffset();
+        const start = dragStart.current ?? lastPos.current;
+        const maxX = Math.max(width - size, 0);
+        const maxY = Math.max(height - size, 0);
+        const nextX = Math.max(0, Math.min(maxX, start.x + g.dx));
+        const nextY = Math.max(0, Math.min(maxY, start.y + g.dy));
+        lastPos.current = { x: nextX, y: nextY };
+        Animated.spring(pan, {
+          toValue: { x: nextX, y: nextY },
+          useNativeDriver: false,
+          friction: 7,
+        }).start();
+      },
+    }),
+  ).current;
+
+  const openFeedback = useCallback(() => {
+    setMenuOpen(false);
+    void YaverFeedback.startReport();
+  }, []);
+
+  const hideForever = useCallback(() => {
+    setMenuOpen(false);
+    setUserDisabled(true);
+    void setQuickIconDisabled(true);
+  }, []);
+
+  if (hostSuppressed) return null;
+  if (mode === 'off') return null;
+  if (userDisabled === null) return null;
+  if (userDisabled) return null;
+  if (mode === 'after-shake' && !shakenThisSession) return null;
+  if (!YaverFeedback.isEnabled()) return null;
+
+  const visualSize = size;
+  const radius = visualSize / 2;
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      style={[
+        StyleSheet.absoluteFill,
+        { zIndex: 9998 },
+      ]}
+    >
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          styles.container,
+          {
+            transform: [{ translateX: pan.x }, { translateY: pan.y }],
+          },
+        ]}
+      >
+        <Pressable
+          onPress={() => {
+            if (didDrag.current) {
+              didDrag.current = false;
+              return;
+            }
+            openFeedback();
+          }}
+          onLongPress={() => {
+            if (didDrag.current) return;
+            setMenuOpen((m) => !m);
+          }}
+          delayLongPress={LONG_PRESS_MS}
+          hitSlop={6}
+          accessibilityRole="button"
+          accessibilityLabel="Open Yaver feedback"
+          style={({ pressed }) => [
+            styles.icon,
+            {
+              width: visualSize,
+              height: visualSize,
+              borderRadius: radius,
+              backgroundColor: color,
+              opacity: pressed ? 0.85 : 1,
+            },
+          ]}
+        >
+          <Text style={[styles.iconLabel, { fontSize: Math.round(visualSize * 0.5) }]}>y</Text>
+        </Pressable>
+        {menuOpen ? (
+          <View style={styles.menu}>
+            <Pressable
+              onPress={openFeedback}
+              style={({ pressed }) => [
+                styles.menuItem,
+                pressed && styles.menuItemPressed,
+              ]}
+            >
+              <Text style={styles.menuItemText}>Open feedback</Text>
+            </Pressable>
+            <View style={styles.menuDivider} />
+            <Pressable
+              onPress={hideForever}
+              style={({ pressed }) => [
+                styles.menuItem,
+                pressed && styles.menuItemPressed,
+              ]}
+            >
+              <Text style={[styles.menuItemText, styles.menuItemDanger]}>
+                Hide icon
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    alignItems: 'flex-start',
+  },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  iconLabel: {
+    color: '#ffffff',
+    fontWeight: '700',
+    includeFontPadding: false,
+  },
+  menu: {
+    marginTop: 6,
+    minWidth: 150,
+    backgroundColor: '#1f1f23',
+    borderRadius: 10,
+    paddingVertical: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 6,
+  },
+  menuItem: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  menuItemPressed: {
+    backgroundColor: '#2a2a30',
+  },
+  menuItemText: {
+    color: '#f4f4f5',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  menuItemDanger: {
+    color: '#f97316',
+  },
+  menuDivider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: '#3f3f46',
+    marginHorizontal: 8,
+  },
+});

package/src/YaverFeedback.ts

@@ -13,6 +13,10 @@ import {
   clearSelectedDeviceId,
   DEFAULT_CONVEX_SITE_URL,
 } from './auth';
+import {
+  getQuickIconDisabled,
+  setQuickIconDisabled,
+} from './preferences';
 
 // Is this JS runtime the Yaver mobile app's super-host bridge? The
 // YaverInfo native module is only registered inside Yaver's container
@@ -49,6 +53,14 @@ let maxErrors = 5;
 /** Track whether BlackBox was running before disable (to restart on enable). */
 let blackBoxWasStreaming = false;
 
+/**
+ * Tracks whether the user has already shaken once in this process.
+ * Consumed by QuickActionIcon's `'after-shake'` mode so the icon
+ * appears the first time a user discovers shake and stays around
+ * thereafter.
+ */
+let firstShakeFired = false;
+
 /**
  * Flag evaluation cache — 30s TTL per `userId|key`. Prevents a
  * tight render loop from hammering /flags/eval when the dev calls
@@ -134,6 +146,7 @@ export class YaverFeedback {
     if (enabled && config.trigger === 'shake') {
       shakeDetector = new ShakeDetector();
       shakeDetector.start(() => {
+        YaverFeedback.notifyShake();
         if (config?.reportingOnly) {
           YaverFeedback.sendAutoReport();
         } else {
@@ -464,6 +477,7 @@ export class YaverFeedback {
       if (config?.trigger === 'shake' && !shakeDetector) {
         shakeDetector = new ShakeDetector();
         shakeDetector.start(() => {
+          YaverFeedback.notifyShake();
           if (config?.reportingOnly) {
             YaverFeedback.sendAutoReport();
           } else {
@@ -796,6 +810,59 @@ export class YaverFeedback {
     }
   }
 
+  /**
+   * Internal: fired from every shake path (dev-menu + accelerometer)
+   * before the feedback modal opens. Emits `yaverFeedback:firstShake`
+   * exactly once per process so QuickActionIcon's `'after-shake'` mode
+   * can surface itself on first shake and stay visible for the rest of
+   * the session.
+   */
+  static notifyShake(): void {
+    if (firstShakeFired) return;
+    firstShakeFired = true;
+    try {
+      const { DeviceEventEmitter } = require('react-native');
+      DeviceEventEmitter.emit('yaverFeedback:firstShake');
+    } catch {
+      // emitter unavailable (e.g. jsdom unit test) — safe to ignore
+    }
+  }
+
+  /**
+   * Show / hide the QuickActionIcon programmatically and persist the
+   * choice across launches. Host apps can call this from a settings
+   * screen so the user has a second way to re-enable the icon after
+   * hiding it via the icon's own long-press menu — shake is always the
+   * third back-door because it never depends on a visible control.
+   */
+  static async setQuickIconVisible(visible: boolean): Promise<void> {
+    await setQuickIconDisabled(!visible);
+    try {
+      const { DeviceEventEmitter } = require('react-native');
+      DeviceEventEmitter.emit(
+        visible ? 'yaverFeedback:quickIconShow' : 'yaverFeedback:quickIconHide',
+      );
+    } catch {
+      // emitter unavailable — preference is still persisted
+    }
+  }
+
+  /**
+   * Returns `true` when the user has chosen to hide the QuickActionIcon
+   * (via its long-press menu or `setQuickIconVisible(false)`).
+   * FeedbackModal uses this to surface a one-tap "Show quick icon"
+   * control so the user can bring the icon back without having to know
+   * about the programmatic API.
+   */
+  static async isQuickIconHidden(): Promise<boolean> {
+    return getQuickIconDisabled();
+  }
+
+  /** Clear the persisted "user hid the icon" flag. */
+  static async resetQuickIconPreference(): Promise<void> {
+    await YaverFeedback.setQuickIconVisible(true);
+  }
+
   /** Tear down the SDK (stop shake detector, clear state). */
   static destroy(): void {
     if (shakeDetector) {

package/src/index.ts

@@ -45,7 +45,14 @@ export { AuthOverlay } from './AuthOverlay';
 export { ShakeDetector } from './ShakeDetector';
 export { FloatingButton } from './FloatingButton';
 export { FeedbackModal } from './FeedbackModal';
+export { QuickActionIcon } from './QuickActionIcon';
+export type { QuickActionIconProps } from './QuickActionIcon';
 export { FixReport } from './FixReport';
+export {
+  getQuickIconDisabled,
+  setQuickIconDisabled,
+  clearQuickIconDisabled,
+} from './preferences';
 export {
   configureAuthEndpoints,
   getConvexSiteUrl,

package/src/preferences.ts

@@ -0,0 +1,55 @@
+/**
+ * SDK user preferences persisted across launches.
+ *
+ * Currently only the quick-action icon's user-level dismiss flag
+ * lives here: the dev enables the icon via `FeedbackConfig.quickIcon`,
+ * but the *user* can long-press → Hide to opt out, and we remember
+ * that choice across launches so their next app session still
+ * respects it.
+ *
+ * AsyncStorage is an optional peer dep — if it's not installed the
+ * getters return `false` and the setters silently no-op, so the icon
+ * still works (it just can't remember the disable beyond the
+ * in-memory session).
+ */
+
+let AsyncStorage: {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+} | null = null;
+try {
+  AsyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch {
+  // not installed — degrade gracefully
+}
+
+const QUICK_ICON_DISABLED_KEY = 'yaver_feedback_quickicon_disabled';
+
+/** True if the user has long-pressed the icon and chosen "Hide". */
+export async function getQuickIconDisabled(): Promise<boolean> {
+  if (!AsyncStorage) return false;
+  try {
+    const v = await AsyncStorage.getItem(QUICK_ICON_DISABLED_KEY);
+    return v === '1';
+  } catch {
+    return false;
+  }
+}
+
+export async function setQuickIconDisabled(disabled: boolean): Promise<void> {
+  if (!AsyncStorage) return;
+  try {
+    if (disabled) {
+      await AsyncStorage.setItem(QUICK_ICON_DISABLED_KEY, '1');
+    } else {
+      await AsyncStorage.removeItem(QUICK_ICON_DISABLED_KEY);
+    }
+  } catch {
+    // best-effort
+  }
+}
+
+export async function clearQuickIconDisabled(): Promise<void> {
+  await setQuickIconDisabled(false);
+}

package/src/types.ts

@@ -42,6 +42,34 @@ export interface FeedbackConfig {
   preferredDeviceId?: string;
   /** How feedback collection is triggered */
   trigger?: 'shake' | 'floating-button' | 'manual';
+  /**
+   * Small tap-to-open icon that floats above the app so the user
+   * doesn't have to shake every time they want to open feedback.
+   * Single tap → open the feedback modal; long-press → menu with
+   * "Hide icon" (persisted across launches via AsyncStorage).
+   *
+   * - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+   * - `'always'` → visible from app launch.
+   * - `'after-shake'` → hidden until the first shake this session.
+   * - `'off'` → never rendered. Shake still works.
+   *
+   * The user can always override `'always'` / `'auto'` by long-pressing
+   * → Hide. Devs can clear that override via
+   * `YaverFeedback.resetQuickIconPreference()`.
+   */
+  quickIcon?: 'auto' | 'always' | 'after-shake' | 'off';
+  /**
+   * Background color for the quick-action icon. Default: '#6366f1'
+   * (indigo). Pick something distinctive so the icon never visually
+   * collides with your own FAB.
+   */
+  quickIconColor?: string;
+  /**
+   * Initial position of the quick-action icon, in pixels from the
+   * top-left. Default: near the top-right corner of the screen. The
+   * icon is draggable at runtime — this is only the first mount.
+   */
+  quickIconInitialPosition?: { x: number; y: number };
   /** Enable/disable the SDK. Defaults to __DEV__ */
   enabled?: boolean;
   /**