@fatagnus/convex-feedback 0.1.0

package/src/react/BugReportButton.tsx

@@ -0,0 +1,755 @@
+import { useState, useCallback } from 'react';
+import {
+  ActionIcon,
+  Modal,
+  TextInput,
+  Textarea,
+  Select,
+  Button,
+  Group,
+  Stack,
+  Text,
+  Image,
+  Tooltip,
+  Affix,
+  Transition,
+  Paper,
+  Badge,
+  LoadingOverlay,
+  SegmentedControl,
+  FileButton,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import * as TablerIcons from '@tabler/icons-react';
+
+const IconBug = TablerIcons.IconBug as React.FC<{ size?: number }>;
+const IconCamera = TablerIcons.IconCamera as React.FC<{ size?: number }>;
+const IconX = TablerIcons.IconX as React.FC<{ size?: number }>;
+const IconCheck = TablerIcons.IconCheck as React.FC<{ size?: number }>;
+const IconMessagePlus = TablerIcons.IconMessagePlus as React.FC<{ size?: number }>;
+const IconUpload = TablerIcons.IconUpload as React.FC<{ size?: number }>;
+import { useMutation } from 'convex/react';
+import html2canvas from 'html2canvas';
+import { useBugReportContext } from './BugReportContext';
+import type { FunctionReference } from 'convex/server';
+
+/**
+ * Props for the BugReportButton component
+ */
+export interface BugReportButtonProps {
+  /** Reporter type: 'staff' for internal users, 'customer' for external users */
+  reporterType: 'staff' | 'customer';
+  /** Unique identifier for the reporter */
+  reporterId: string;
+  /** Reporter's email address */
+  reporterEmail: string;
+  /** Reporter's display name */
+  reporterName: string;
+  /** Convex API reference for bug reports */
+  bugReportApi: {
+    create: FunctionReference<'mutation'>;
+    generateUploadUrl: FunctionReference<'mutation'>;
+  };
+  /** Convex API reference for feedback */
+  feedbackApi: {
+    create: FunctionReference<'mutation'>;
+    generateUploadUrl: FunctionReference<'mutation'>;
+  };
+  /** Position of the floating button */
+  position?: { bottom?: number; right?: number; top?: number; left?: number };
+  /** Button color (default: red) */
+  buttonColor?: string;
+  /** Show feedback tab in addition to bug reports */
+  showFeedback?: boolean;
+  /** Callback when submission succeeds */
+  onSuccess?: (type: 'bug' | 'feedback') => void;
+  /** Callback when submission fails */
+  onError?: (error: Error, type: 'bug' | 'feedback') => void;
+}
+
+interface BrowserInfo {
+  userAgent: string;
+  platform: string;
+  language: string;
+  cookiesEnabled: boolean;
+  onLine: boolean;
+  screenWidth: number;
+  screenHeight: number;
+  colorDepth: number;
+  pixelRatio: number;
+}
+
+type FormMode = 'bug' | 'feedback';
+
+/**
+ * Floating action button for submitting bug reports and feedback.
+ * Captures browser diagnostics, console errors, and optional screenshots.
+ *
+ * @example
+ * ```tsx
+ * import { BugReportButton } from '@convex-dev/feedback/react';
+ * import { api } from './convex/_generated/api';
+ *
+ * function App() {
+ *   return (
+ *     <BugReportButton
+ *       reporterType="staff"
+ *       reporterId={user.id}
+ *       reporterEmail={user.email}
+ *       reporterName={user.name}
+ *       bugReportApi={{
+ *         create: api.feedback.bugReports.create,
+ *         generateUploadUrl: api.feedback.bugReports.generateUploadUrl,
+ *       }}
+ *       feedbackApi={{
+ *         create: api.feedback.feedback.create,
+ *         generateUploadUrl: api.feedback.feedback.generateUploadUrl,
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function BugReportButton({
+  reporterType,
+  reporterId,
+  reporterEmail,
+  reporterName,
+  bugReportApi,
+  feedbackApi,
+  position = { bottom: 20, right: 20 },
+  buttonColor = 'red',
+  showFeedback = true,
+  onSuccess,
+  onError,
+}: BugReportButtonProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [formMode, setFormMode] = useState<FormMode>('bug');
+  const [screenshot, setScreenshot] = useState<string | null>(null);
+  const [screenshotBlob, setScreenshotBlob] = useState<Blob | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { getConsoleErrors, clearConsoleErrors } = useBugReportContext();
+  const createBugReport = useMutation(bugReportApi.create);
+  const createFeedback = useMutation(feedbackApi.create);
+  const generateBugUploadUrl = useMutation(bugReportApi.generateUploadUrl);
+  const generateFeedbackUploadUrl = useMutation(feedbackApi.generateUploadUrl);
+
+  // Bug report form
+  const bugForm = useForm({
+    initialValues: {
+      title: '',
+      description: '',
+      severity: 'medium' as 'low' | 'medium' | 'high' | 'critical',
+    },
+    validate: {
+      title: (value) =>
+        value.trim().length < 5 ? 'Title must be at least 5 characters' : null,
+      description: (value) =>
+        value.trim().length < 10
+          ? 'Please provide more details (at least 10 characters)'
+          : null,
+    },
+  });
+
+  // Feedback form
+  const feedbackForm = useForm({
+    initialValues: {
+      title: '',
+      description: '',
+      type: 'feature_request' as 'feature_request' | 'change_request' | 'general',
+      priority: 'important' as 'nice_to_have' | 'important' | 'critical',
+    },
+    validate: {
+      title: (value) =>
+        value.trim().length < 5 ? 'Title must be at least 5 characters' : null,
+      description: (value) =>
+        value.trim().length < 10
+          ? 'Please provide more details (at least 10 characters)'
+          : null,
+    },
+  });
+
+  const getBrowserInfo = useCallback((): BrowserInfo => {
+    return {
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      language: navigator.language,
+      cookiesEnabled: navigator.cookieEnabled,
+      onLine: navigator.onLine,
+      screenWidth: window.screen.width,
+      screenHeight: window.screen.height,
+      colorDepth: window.screen.colorDepth,
+      pixelRatio: window.devicePixelRatio,
+    };
+  }, []);
+
+  const captureScreenshot = useCallback(async () => {
+    setIsCapturing(true);
+    try {
+      // Hide the modal temporarily for screenshot
+      const modalElement = document.querySelector('[data-bug-report-modal]');
+      if (modalElement) {
+        (modalElement as HTMLElement).style.visibility = 'hidden';
+      }
+
+      // Small delay to ensure modal is hidden
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const canvas = await html2canvas(document.body, {
+        logging: false,
+        useCORS: true,
+        allowTaint: true,
+        scale: 1,
+      });
+
+      // Show modal again
+      if (modalElement) {
+        (modalElement as HTMLElement).style.visibility = 'visible';
+      }
+
+      const dataUrl = canvas.toDataURL('image/png');
+      setScreenshot(dataUrl);
+
+      // Convert to blob for upload
+      canvas.toBlob((blob) => {
+        if (blob) {
+          setScreenshotBlob(blob);
+        }
+      }, 'image/png');
+
+      notifications.show({
+        title: 'Screenshot captured',
+        message: 'Screenshot has been attached to your report',
+        color: 'green',
+        icon: <IconCheck size={16} />,
+      });
+    } catch (error) {
+      console.error('Failed to capture screenshot:', error);
+      notifications.show({
+        title: 'Screenshot failed',
+        message: 'Could not capture screenshot. You can still submit the report.',
+        color: 'yellow',
+      });
+    } finally {
+      setIsCapturing(false);
+    }
+  }, []);
+
+  const removeScreenshot = useCallback(() => {
+    setScreenshot(null);
+    setScreenshotBlob(null);
+  }, []);
+
+  const handleFileUpload = useCallback((file: File | null) => {
+    if (!file) return;
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      notifications.show({
+        title: 'Invalid file type',
+        message: 'Please upload an image file (PNG, JPG, GIF, etc.)',
+        color: 'red',
+      });
+      return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSize = 10 * 1024 * 1024;
+    if (file.size > maxSize) {
+      notifications.show({
+        title: 'File too large',
+        message: 'Please upload an image smaller than 10MB',
+        color: 'red',
+      });
+      return;
+    }
+
+    // Read the file and set as screenshot
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const dataUrl = e.target?.result as string;
+      setScreenshot(dataUrl);
+      setScreenshotBlob(file);
+      notifications.show({
+        title: 'Screenshot uploaded',
+        message: 'Screenshot has been attached to your report',
+        color: 'green',
+        icon: <IconCheck size={16} />,
+      });
+    };
+    reader.onerror = () => {
+      notifications.show({
+        title: 'Upload failed',
+        message: 'Could not read the image file. Please try again.',
+        color: 'red',
+      });
+    };
+    reader.readAsDataURL(file);
+  }, []);
+
+  const handleBugSubmit = async (values: typeof bugForm.values) => {
+    setIsSubmitting(true);
+    try {
+      // Upload screenshot if exists
+      let screenshotStorageId: string | undefined;
+      if (screenshotBlob) {
+        const uploadUrl = await generateBugUploadUrl({});
+        const response = await fetch(uploadUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': screenshotBlob.type || 'image/png' },
+          body: screenshotBlob,
+        });
+        const { storageId } = await response.json();
+        screenshotStorageId = storageId;
+      }
+
+      // Get console errors
+      const consoleErrors = getConsoleErrors();
+
+      // Create the report
+      await createBugReport({
+        title: values.title,
+        description: values.description,
+        severity: values.severity,
+        reporterType,
+        reporterId,
+        reporterEmail,
+        reporterName,
+        url: window.location.href,
+        route: window.location.pathname,
+        browserInfo: JSON.stringify(getBrowserInfo()),
+        consoleErrors:
+          consoleErrors.length > 0 ? JSON.stringify(consoleErrors) : undefined,
+        screenshotStorageId,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        networkState: navigator.onLine ? 'online' : 'offline',
+      });
+
+      // Clear console errors after successful submission
+      clearConsoleErrors();
+
+      notifications.show({
+        title: 'Bug report submitted',
+        message: 'Thank you for your feedback! We will look into this issue.',
+        color: 'green',
+        icon: <IconCheck size={16} />,
+      });
+
+      onSuccess?.('bug');
+
+      // Reset form and close modal
+      bugForm.reset();
+      setScreenshot(null);
+      setScreenshotBlob(null);
+      close();
+    } catch (error) {
+      console.error('Failed to submit bug report:', error);
+      notifications.show({
+        title: 'Submission failed',
+        message: 'Could not submit bug report. Please try again.',
+        color: 'red',
+      });
+      onError?.(error instanceof Error ? error : new Error(String(error)), 'bug');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleFeedbackSubmit = async (values: typeof feedbackForm.values) => {
+    setIsSubmitting(true);
+    try {
+      // Upload screenshot if exists
+      let screenshotStorageId: string | undefined;
+      if (screenshotBlob) {
+        const uploadUrl = await generateFeedbackUploadUrl({});
+        const response = await fetch(uploadUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': screenshotBlob.type || 'image/png' },
+          body: screenshotBlob,
+        });
+        const { storageId } = await response.json();
+        screenshotStorageId = storageId;
+      }
+
+      // Get console errors
+      const consoleErrors = getConsoleErrors();
+
+      // Create the feedback
+      await createFeedback({
+        type: values.type,
+        title: values.title,
+        description: values.description,
+        priority: values.priority,
+        reporterType,
+        reporterId,
+        reporterEmail,
+        reporterName,
+        url: window.location.href,
+        route: window.location.pathname,
+        browserInfo: JSON.stringify(getBrowserInfo()),
+        consoleErrors:
+          consoleErrors.length > 0 ? JSON.stringify(consoleErrors) : undefined,
+        screenshotStorageId,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        networkState: navigator.onLine ? 'online' : 'offline',
+      });
+
+      // Clear console errors after successful submission
+      clearConsoleErrors();
+
+      notifications.show({
+        title: 'Feedback submitted',
+        message: 'Thank you for your feedback! We appreciate your input.',
+        color: 'green',
+        icon: <IconCheck size={16} />,
+      });
+
+      onSuccess?.('feedback');
+
+      // Reset form and close modal
+      feedbackForm.reset();
+      setScreenshot(null);
+      setScreenshotBlob(null);
+      close();
+    } catch (error) {
+      console.error('Failed to submit feedback:', error);
+      notifications.show({
+        title: 'Submission failed',
+        message: 'Could not submit feedback. Please try again.',
+        color: 'red',
+      });
+      onError?.(error instanceof Error ? error : new Error(String(error)), 'feedback');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleOpen = () => {
+    bugForm.reset();
+    feedbackForm.reset();
+    setScreenshot(null);
+    setScreenshotBlob(null);
+    setFormMode('bug');
+    open();
+  };
+
+  const handleModeChange = (mode: string) => {
+    setFormMode(mode as FormMode);
+    setScreenshot(null);
+    setScreenshotBlob(null);
+  };
+
+  return (
+    <>
+      {/* Floating Action Button */}
+      <Affix position={position}>
+        <Transition transition="slide-up" mounted={true}>
+          {(transitionStyles) => (
+            <Tooltip label="Report a bug" position="left" withArrow>
+              <ActionIcon
+                style={transitionStyles}
+                variant="filled"
+                color={buttonColor}
+                size="xl"
+                radius="xl"
+                onClick={handleOpen}
+                aria-label="Report a bug"
+              >
+                <IconBug size={24} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </Transition>
+      </Affix>
+
+      {/* Bug Report / Feedback Modal */}
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={
+          <Group gap="xs">
+            {formMode === 'bug' ? (
+              <IconBug size={20} />
+            ) : (
+              <IconMessagePlus size={20} />
+            )}
+            <Text fw={600}>
+              {formMode === 'bug' ? 'Report a Bug' : 'Submit Feedback'}
+            </Text>
+          </Group>
+        }
+        size="md"
+        data-bug-report-modal
+      >
+        <LoadingOverlay visible={isSubmitting} />
+        <Stack gap="md">
+          {/* Mode Switcher */}
+          {showFeedback && (
+            <SegmentedControl
+              value={formMode}
+              onChange={handleModeChange}
+              data={[
+                { value: 'bug', label: 'Bug Report' },
+                { value: 'feedback', label: 'Feedback' },
+              ]}
+              fullWidth
+            />
+          )}
+
+          {formMode === 'bug' ? (
+            <form onSubmit={bugForm.onSubmit(handleBugSubmit)}>
+              <Stack gap="md">
+                <TextInput
+                  label="Title"
+                  placeholder="Brief summary of the issue"
+                  required
+                  {...bugForm.getInputProps('title')}
+                />
+
+                <Textarea
+                  label="Description"
+                  placeholder="What happened? What were you trying to do? What did you expect to happen?"
+                  required
+                  minRows={4}
+                  {...bugForm.getInputProps('description')}
+                />
+
+                <Select
+                  label="Severity"
+                  placeholder="How severe is this issue?"
+                  data={[
+                    { value: 'low', label: 'Low - Minor inconvenience' },
+                    { value: 'medium', label: 'Medium - Affects workflow' },
+                    { value: 'high', label: 'High - Major functionality broken' },
+                    { value: 'critical', label: 'Critical - System unusable' },
+                  ]}
+                  {...bugForm.getInputProps('severity')}
+                />
+
+                {/* Screenshot Section */}
+                <Stack gap="xs">
+                  <Group justify="space-between">
+                    <Text size="sm" fw={500}>
+                      Screenshot
+                    </Text>
+                    {screenshot ? (
+                      <Button
+                        variant="subtle"
+                        color="red"
+                        size="xs"
+                        leftSection={<IconX size={14} />}
+                        onClick={removeScreenshot}
+                      >
+                        Remove
+                      </Button>
+                    ) : (
+                      <Group gap="xs">
+                        <Button
+                          variant="light"
+                          size="xs"
+                          leftSection={<IconCamera size={14} />}
+                          onClick={captureScreenshot}
+                          loading={isCapturing}
+                        >
+                          Capture
+                        </Button>
+                        <FileButton onChange={handleFileUpload} accept="image/*">
+                          {(props) => (
+                            <Button
+                              {...props}
+                              variant="light"
+                              size="xs"
+                              leftSection={<IconUpload size={14} />}
+                            >
+                              Upload
+                            </Button>
+                          )}
+                        </FileButton>
+                      </Group>
+                    )}
+                  </Group>
+                  {screenshot && (
+                    <Paper withBorder p="xs" radius="md">
+                      <Image
+                        src={screenshot}
+                        alt="Bug screenshot"
+                        radius="md"
+                        fit="contain"
+                        h={150}
+                      />
+                    </Paper>
+                  )}
+                </Stack>
+
+                {/* Auto-captured Info Badge */}
+                <Paper withBorder p="xs" radius="md">
+                  <Group gap="xs">
+                    <Badge size="xs" variant="outline" color="gray">
+                      Auto-captured
+                    </Badge>
+                    <Text size="xs" c="dimmed">
+                      Browser info, URL, viewport size, and console errors will be
+                      included automatically.
+                    </Text>
+                  </Group>
+                </Paper>
+
+                {/* Submit Buttons */}
+                <Group justify="flex-end" mt="md">
+                  <Button variant="subtle" onClick={close} disabled={isSubmitting}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" loading={isSubmitting}>
+                    Submit Report
+                  </Button>
+                </Group>
+              </Stack>
+            </form>
+          ) : (
+            <form onSubmit={feedbackForm.onSubmit(handleFeedbackSubmit)}>
+              <Stack gap="md">
+                <Select
+                  label="Feedback Type"
+                  placeholder="What kind of feedback is this?"
+                  data={[
+                    {
+                      value: 'feature_request',
+                      label: 'Feature Request - Idea for new functionality',
+                    },
+                    {
+                      value: 'change_request',
+                      label: 'Change Request - Modify existing feature',
+                    },
+                    {
+                      value: 'general',
+                      label: 'General Feedback - Comments or suggestions',
+                    },
+                  ]}
+                  {...feedbackForm.getInputProps('type')}
+                />
+
+                <TextInput
+                  label="Title"
+                  placeholder="Brief summary of your feedback"
+                  required
+                  {...feedbackForm.getInputProps('title')}
+                />
+
+                <Textarea
+                  label="Description"
+                  placeholder="Describe your idea or suggestion in detail. What problem does it solve? How would it improve your workflow?"
+                  required
+                  minRows={4}
+                  {...feedbackForm.getInputProps('description')}
+                />
+
+                <Select
+                  label="Priority"
+                  placeholder="How important is this to you?"
+                  data={[
+                    {
+                      value: 'nice_to_have',
+                      label: 'Nice to Have - Would be a welcome addition',
+                    },
+                    {
+                      value: 'important',
+                      label: 'Important - Would significantly improve my work',
+                    },
+                    {
+                      value: 'critical',
+                      label: 'Critical - Blocking my workflow',
+                    },
+                  ]}
+                  {...feedbackForm.getInputProps('priority')}
+                />
+
+                {/* Screenshot Section */}
+                <Stack gap="xs">
+                  <Group justify="space-between">
+                    <Text size="sm" fw={500}>
+                      Screenshot (optional)
+                    </Text>
+                    {screenshot ? (
+                      <Button
+                        variant="subtle"
+                        color="red"
+                        size="xs"
+                        leftSection={<IconX size={14} />}
+                        onClick={removeScreenshot}
+                      >
+                        Remove
+                      </Button>
+                    ) : (
+                      <Group gap="xs">
+                        <Button
+                          variant="light"
+                          size="xs"
+                          leftSection={<IconCamera size={14} />}
+                          onClick={captureScreenshot}
+                          loading={isCapturing}
+                        >
+                          Capture
+                        </Button>
+                        <FileButton onChange={handleFileUpload} accept="image/*">
+                          {(props) => (
+                            <Button
+                              {...props}
+                              variant="light"
+                              size="xs"
+                              leftSection={<IconUpload size={14} />}
+                            >
+                              Upload
+                            </Button>
+                          )}
+                        </FileButton>
+                      </Group>
+                    )}
+                  </Group>
+                  {screenshot && (
+                    <Paper withBorder p="xs" radius="md">
+                      <Image
+                        src={screenshot}
+                        alt="Feedback screenshot"
+                        radius="md"
+                        fit="contain"
+                        h={150}
+                      />
+                    </Paper>
+                  )}
+                </Stack>
+
+                {/* Auto-captured Info Badge */}
+                <Paper withBorder p="xs" radius="md">
+                  <Group gap="xs">
+                    <Badge size="xs" variant="outline" color="gray">
+                      Auto-captured
+                    </Badge>
+                    <Text size="xs" c="dimmed">
+                      Browser info and page context will be included automatically.
+                    </Text>
+                  </Group>
+                </Paper>
+
+                {/* Submit Buttons */}
+                <Group justify="flex-end" mt="md">
+                  <Button variant="subtle" onClick={close} disabled={isSubmitting}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" loading={isSubmitting} color="teal">
+                    Submit Feedback
+                  </Button>
+                </Group>
+              </Stack>
+            </form>
+          )}
+        </Stack>
+      </Modal>
+    </>
+  );
+}