@luisbovo/fidebe
Version:
Modern floating feedback widget for React apps. Collect user feedback, screenshots, images, and context with a customizable modal.
65 lines (64 loc) • 3.08 kB
TypeScript
import { LogEntry } from '../../utils/console-recorder';
import { CollectEnvResult } from '../../utils/env';
import { default as React } from 'react';
type FidebeFormData = {
feedback: {
description: string;
images: FileList | undefined;
};
environment: CollectEnvResult;
logs: {
count: number;
entries: LogEntry[];
};
context?: Record<string, any>;
};
export interface FidebeWidgetProps {
label?: string | React.ReactNode;
className?: string;
style?: React.CSSProperties;
dialogClassName?: string;
dialogStyle?: React.CSSProperties;
dialogTitle?: string | React.ReactNode;
dialogTitleClassName?: string;
dialogTitleStyle?: React.CSSProperties;
dialogDescription?: string | React.ReactNode;
dialogDescriptionClassName?: string;
dialogDescriptionStyle?: React.CSSProperties;
dialogDescriptionFieldLabel?: string | React.ReactNode;
dialogDescriptionFieldLabelClassName?: string;
dialogDescriptionFieldLabelStyle?: React.CSSProperties;
dialogDescriptionFieldPlaceholder?: string;
dialogDescriptionFieldError?: string;
dialogDescriptionFieldClassName?: string;
dialogDescriptionFieldStyle?: React.CSSProperties;
dialogImageFieldLabel?: string | React.ReactNode;
dialogImageFieldLabelClassName?: string;
dialogImageFieldLabelStyle?: React.CSSProperties;
dialogImageFieldPlaceholder?: string;
dialogImageFieldClassName?: string;
dialogImageFieldStyle?: React.CSSProperties;
dialogSend?: string | React.ReactNode;
dialogSendClassName?: string;
dialogSendStyle?: React.CSSProperties;
dialogCancel?: string | React.ReactNode;
dialogCancelClassName?: string;
dialogCancelStyle?: React.CSSProperties;
onSubmit?: (data: FidebeFormData) => void;
onImageUpload?: (formData: FormData) => void;
extraContext?: Record<string, any>;
}
/**
* Floating feedback widget for React applications.
*
* Provides a customizable button and modal for collecting user feedback, screenshots, images, and context data.
*
* Main props:
* - onSubmit: Callback for feedback submission
* - onImageUpload: Callback for image uploads
* - extraContext: Additional context to include
*
* Styled with TailwindCSS and ShadCN UI.
*/
export declare function FidebeWidget({ label, className, style, dialogTitle, dialogTitleClassName, dialogTitleStyle, dialogDescription, dialogDescriptionClassName, dialogDescriptionStyle, dialogDescriptionFieldLabel, dialogDescriptionFieldLabelClassName, dialogDescriptionFieldLabelStyle, dialogDescriptionFieldPlaceholder, dialogDescriptionFieldError, dialogDescriptionFieldClassName, dialogDescriptionFieldStyle, dialogImageFieldLabel, dialogImageFieldLabelClassName, dialogImageFieldLabelStyle, dialogImageFieldPlaceholder, dialogImageFieldClassName, dialogImageFieldStyle, dialogSend, dialogSendClassName, dialogSendStyle, dialogCancel, dialogCancelClassName, dialogCancelStyle, onSubmit, onImageUpload, extraContext, }: FidebeWidgetProps): import("react/jsx-runtime").JSX.Element;
export {};