yaver-feedback-react-native 0.7.17 → 0.8.1

package/src/P2PClient.ts

@@ -179,6 +179,14 @@ export class P2PClient {
       } as any);
     }
 
+    if (bundle.audio) {
+      formData.append('audio', {
+        uri: Platform.OS === 'android' ? `file://${bundle.audio}` : bundle.audio,
+        type: 'audio/m4a',
+        name: 'voice_note.m4a',
+      } as any);
+    }
+
     const response = await fetch(`${this.baseUrl}/feedback`, {
       method: 'POST',
       headers: {

package/src/QuickActionIcon.tsx

@@ -0,0 +1,375 @@
+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_BACKGROUND_COLOR = '#ff6b2c';
+const DEFAULT_LABEL_COLOR = '#111111';
+const DEFAULT_BORDER_COLOR = 'rgba(255,255,255,0.92)';
+const DEFAULT_SHADOW_COLOR = '#000000';
+const LONG_PRESS_MS = 550;
+
+export interface QuickActionIconProps {
+  /** Deprecated alias for `backgroundColor`. */
+  color?: string;
+  /** Override the background from FeedbackConfig.quickIconBackgroundColor. */
+  backgroundColor?: string;
+  /** Override the label color from FeedbackConfig.quickIconForegroundColor. */
+  foregroundColor?: string;
+  /** Override the border color from FeedbackConfig.quickIconBorderColor. */
+  borderColor?: string;
+  /** Override the shadow color from FeedbackConfig.quickIconShadowColor. */
+  shadowColor?: 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) → `'after-shake'` 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,
+  backgroundColor: backgroundColorProp,
+  foregroundColor: foregroundColorProp,
+  borderColor: borderColorProp,
+  shadowColor: shadowColorProp,
+  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' : 'after-shake';
+    }
+    return raw;
+  })();
+
+  const backgroundColor =
+    backgroundColorProp ??
+    colorProp ??
+    config?.quickIconBackgroundColor ??
+    config?.quickIconColor ??
+    DEFAULT_BACKGROUND_COLOR;
+  const foregroundColor =
+    foregroundColorProp ??
+    config?.quickIconForegroundColor ??
+    DEFAULT_LABEL_COLOR;
+  const borderColor =
+    borderColorProp ??
+    config?.quickIconBorderColor ??
+    DEFAULT_BORDER_COLOR;
+  const shadowColor =
+    shadowColorProp ??
+    config?.quickIconShadowColor ??
+    DEFAULT_SHADOW_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,
+              borderColor,
+              shadowColor,
+              opacity: pressed ? 0.85 : 1,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.iconLabel,
+              {
+                color: foregroundColor,
+                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',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.34,
+    shadowRadius: 6,
+    elevation: 7,
+    borderWidth: 2,
+  },
+  iconLabel: {
+    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
@@ -80,6 +92,7 @@ export class YaverFeedback {
       autoLogin: true,
       ...cfg,
     };
+    firstShakeFired = false;
 
     // Route the in-SDK login screen to prod yaver.io by default; callers may
     // override for staging via authConvexSiteUrl / authWebBaseUrl.
@@ -134,6 +147,7 @@ export class YaverFeedback {
     if (enabled && config.trigger === 'shake') {
       shakeDetector = new ShakeDetector();
       shakeDetector.start(() => {
+        YaverFeedback.notifyShake();
         if (config?.reportingOnly) {
           YaverFeedback.sendAutoReport();
         } else {
@@ -464,6 +478,7 @@ export class YaverFeedback {
       if (config?.trigger === 'shake' && !shakeDetector) {
         shakeDetector = new ShakeDetector();
         shakeDetector.start(() => {
+          YaverFeedback.notifyShake();
           if (config?.reportingOnly) {
             YaverFeedback.sendAutoReport();
           } else {
@@ -796,12 +811,66 @@ 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) {
       shakeDetector.stop();
       shakeDetector = null;
     }
+    firstShakeFired = false;
     enabled = false;
     config = null;
     p2pClient = null;

package/src/capture.ts

@@ -38,6 +38,80 @@ export async function captureScreenshot(): Promise<string> {
   }
 }
 
+export interface PickedFeedbackFile {
+  path: string;
+  name: string;
+  mimeType?: string;
+  kind: 'image' | 'video' | 'audio' | 'unknown';
+}
+
+function classifyPickedFile(name: string, mimeType?: string): PickedFeedbackFile['kind'] {
+  const lowerName = name.toLowerCase();
+  const lowerMime = (mimeType ?? '').toLowerCase();
+  if (
+    lowerMime.startsWith('image/') ||
+    lowerName.endsWith('.png') ||
+    lowerName.endsWith('.jpg') ||
+    lowerName.endsWith('.jpeg') ||
+    lowerName.endsWith('.webp')
+  ) {
+    return 'image';
+  }
+  if (
+    lowerMime.startsWith('video/') ||
+    lowerName.endsWith('.mp4') ||
+    lowerName.endsWith('.mov') ||
+    lowerName.endsWith('.m4v')
+  ) {
+    return 'video';
+  }
+  if (
+    lowerMime.startsWith('audio/') ||
+    lowerName.endsWith('.m4a') ||
+    lowerName.endsWith('.aac') ||
+    lowerName.endsWith('.wav') ||
+    lowerName.endsWith('.mp3')
+  ) {
+    return 'audio';
+  }
+  return 'unknown';
+}
+
+/**
+ * Pick an existing media file from the device. Requires
+ * `expo-document-picker` to be installed.
+ */
+export async function pickFeedbackFile(): Promise<PickedFeedbackFile> {
+  try {
+    const picker = require('expo-document-picker');
+    const result = await picker.getDocumentAsync({
+      copyToCacheDirectory: true,
+      multiple: false,
+      type: ['image/*', 'video/*', 'audio/*'],
+    });
+    if (result?.canceled) {
+      throw new Error('File selection canceled.');
+    }
+    const asset = result?.assets?.[0];
+    if (!asset?.uri) {
+      throw new Error('No file selected.');
+    }
+    const name = asset.name || asset.uri.split('/').pop() || 'attachment';
+    const mimeType = asset.mimeType as string | undefined;
+    return {
+      path: asset.uri,
+      name,
+      mimeType,
+      kind: classifyPickedFile(name, mimeType),
+    };
+  } catch (err) {
+    throw new Error(
+      '[YaverFeedback] File upload needs `expo-document-picker` as an optional peer dependency. ' +
+        String(err),
+    );
+  }
+}
+
 let videoRecorderModule: any = null;
 let videoRecordingActive = false;
 

package/src/index.ts

@@ -1,13 +1,15 @@
 /**
  * yaver-feedback-react-native — Visual feedback SDK for Yaver.
  *
- * Shake-to-report surface with five one-tap actions:
+ * Shake-to-report surface with four core actions:
  *  1. Hot Reload              — instant JS reload
- *  2. Screenshot & Fix        — capture the screen under the modal and
- *                               kick a fix task on the agent
- *  3. Vibing                  — open a vibing session on the agent
- *  4. Start / Stop Recording  — screen recording toggle
- *  5. Send Video              — submit the last recording
+ *  2. Vibing                  — open a vibing session on the agent
+ *  3. Screenshot / Upload     — capture the screen under the modal or
+ *                               upload existing media
+ *  4. Screen Recording        — start, then stop + upload
+ *
+ * The small quick-access icon stays hidden until the first shake by
+ * default on mobile, then remains available unless the user hides it.
  *
  * @example
  * ```tsx
@@ -45,7 +47,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,
@@ -76,6 +85,7 @@ export type {
 } from './auth';
 export {
   captureScreenshot,
+  pickFeedbackFile,
   startVideoRecording,
   stopVideoRecording,
   isVideoRecording,

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