yaver-feedback-react-native 0.8.0 → 0.8.1

package/src/QuickActionIcon.tsx

@@ -26,12 +26,23 @@ function isRunningInsideYaverHost(): boolean {
 }
 
 const DEFAULT_SIZE = 44;
-const DEFAULT_COLOR = '#6366f1';
+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 {
-  /** Override the color from FeedbackConfig.quickIconColor. */
+  /** 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. */
@@ -52,7 +63,7 @@ export interface QuickActionIconProps {
  * hidden the user can still shake to open feedback.
  *
  * Visibility is controlled by `FeedbackConfig.quickIcon`:
- *  - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+ *  - `'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.
@@ -62,6 +73,10 @@ export interface QuickActionIconProps {
  */
 export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   color: colorProp,
+  backgroundColor: backgroundColorProp,
+  foregroundColor: foregroundColorProp,
+  borderColor: borderColorProp,
+  shadowColor: shadowColorProp,
   initialPosition: initialPositionProp,
   size = DEFAULT_SIZE,
 }) => {
@@ -70,12 +85,29 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   const mode: 'always' | 'after-shake' | 'off' = (() => {
     const raw = config?.quickIcon ?? 'auto';
     if (raw === 'auto') {
-      return Platform.OS === 'web' ? 'off' : 'always';
+      return Platform.OS === 'web' ? 'off' : 'after-shake';
     }
     return raw;
   })();
 
-  const color = colorProp ?? config?.quickIconColor ?? DEFAULT_COLOR;
+  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 =
@@ -239,12 +271,24 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
               width: visualSize,
               height: visualSize,
               borderRadius: radius,
-              backgroundColor: color,
+              backgroundColor,
+              borderColor,
+              shadowColor,
               opacity: pressed ? 0.85 : 1,
             },
           ]}
         >
-          <Text style={[styles.iconLabel, { fontSize: Math.round(visualSize * 0.5) }]}>y</Text>
+          <Text
+            style={[
+              styles.iconLabel,
+              {
+                color: foregroundColor,
+                fontSize: Math.round(visualSize * 0.5),
+              },
+            ]}
+          >
+            y
+          </Text>
         </Pressable>
         {menuOpen ? (
           <View style={styles.menu}>
@@ -286,14 +330,13 @@ const styles = StyleSheet.create({
   icon: {
     alignItems: 'center',
     justifyContent: 'center',
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 4,
+    shadowOpacity: 0.34,
+    shadowRadius: 6,
+    elevation: 7,
+    borderWidth: 2,
   },
   iconLabel: {
-    color: '#ffffff',
     fontWeight: '700',
     includeFontPadding: false,
   },

package/src/YaverFeedback.ts

@@ -92,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.
@@ -869,6 +870,7 @@ export class YaverFeedback {
       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
@@ -83,6 +85,7 @@ export type {
 } from './auth';
 export {
   captureScreenshot,
+  pickFeedbackFile,
   startVideoRecording,
   stopVideoRecording,
   isVideoRecording,

package/src/types.ts

@@ -48,7 +48,7 @@ export interface FeedbackConfig {
    * 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.
+   * - `'auto'` (default) → `'after-shake'` 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.
@@ -59,11 +59,34 @@ export interface FeedbackConfig {
    */
   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.
+   * Deprecated alias for `quickIconBackgroundColor`.
+   *
+   * Background color for the quick-action icon. The SDK now defaults
+   * to a high-visibility safety orange so the icon reads as a utility
+   * affordance instead of blending into the common blue/indigo FAB
+   * palette many mobile apps already use.
    */
   quickIconColor?: string;
+  /**
+   * Background color for the quick-action icon.
+   * Default: '#ff6b2c' (safety orange).
+   */
+  quickIconBackgroundColor?: string;
+  /**
+   * Foreground/text color for the quick-action icon label.
+   * Default: '#111111'.
+   */
+  quickIconForegroundColor?: string;
+  /**
+   * Border color for the quick-action icon.
+   * Default: 'rgba(255,255,255,0.92)'.
+   */
+  quickIconBorderColor?: string;
+  /**
+   * Shadow color for the quick-action icon.
+   * Default: '#000000'.
+   */
+  quickIconShadowColor?: string;
   /**
    * Initial position of the quick-action icon, in pixels from the
    * top-left. Default: near the top-right corner of the screen. The
@@ -189,6 +212,8 @@ export interface FeedbackBundle {
   metadata: FeedbackMetadata;
   /** Screen-recording file path, when produced by the "Start Recording" action. */
   video?: string;
+  /** Optional audio attachment path. */
+  audio?: string;
   screenshots: string[];
   /** Captured errors with stack traces, attached via attachError / wrapErrorHandler. */
   errors?: CapturedError[];

package/src/upload.ts

@@ -8,6 +8,7 @@ import { FeedbackBundle } from './types';
  * - `metadata` (JSON string)
  * - `screenshot_0`, `screenshot_1`, ... (image files)
  * - `video` (video file, if present)
+ * - `audio` (audio file, if present)
  *
  * Returns the parsed agent response — typically `{ ok, id, reportId }`.
  * Callers can inspect `.id` / `.reportId` to drive a follow-up
@@ -43,6 +44,14 @@ export async function uploadFeedback(
     } 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 url = agentUrl.replace(/\/$/, '') + '/feedback';
 
   const response = await fetch(url, {