TypeScript Support

import type {
  FeedbackWidgetConfig,
  WidgetState,
  WidgetPosition,
  WidgetVariant,
  WidgetInstance,
} from '@cobbl-ai/feedback-widget'

import type { FeedbackWidgetProps } from '@cobbl-ai/feedback-widget/react'

interface FeedbackWidgetConfig {
  /**
   * The run ID from a prompt run to submit feedback for
   */
  runId: string

  /**
   * Widget variant
   * - 'trigger': Shows a trigger button that opens the feedback popover
   * - 'thumbs': Shows thumbs up/down buttons that immediately register feedback
   * - 'inline': Renders the full feedback form directly without a flyout
   * @default 'trigger'
   */
  variant?: WidgetVariant

  /**
   * Callback fired when feedback is successfully submitted
   */
  onSuccess?: (feedbackId: string) => void

  /**
   * Callback fired when feedback submission fails
   */
  onError?: (error: Error) => void

  /**
   * Custom trigger button text
   * Only used when variant is 'trigger'
   * @default 'Give Feedback'
   */
  triggerButtonText?: string

  /**
   * Position of the widget flyout
   * Only used when variant is 'trigger' or 'thumbs'
   * @default 'bottom-right'
   */
  position?: WidgetPosition
}

type WidgetVariant = 'trigger' | 'thumbs' | 'inline'

type WidgetPosition =
  | 'top-left'
  | 'top'
  | 'top-right'
  | 'right'
  | 'bottom-right'
  | 'bottom'
  | 'bottom-left'
  | 'left'

interface WidgetInstance {
  /**
   * Mount the widget to a DOM element
   * @param container - Element or selector to mount to
   */
  mount(container: string | HTMLElement): void

  /**
   * Update the widget configuration
   * @param config - Partial configuration to update
   */
  update(config: Partial<FeedbackWidgetConfig>): void

  /**
   * Unmount and cleanup the widget
   */
  destroy(): void

  /**
   * Get current configuration
   */
  getConfig(): FeedbackWidgetConfig
}

interface WidgetState {
  isOpen: boolean
  helpful: Helpful | null
  feedback: string
  isSubmitting: boolean
  isSubmitted: boolean
  error: string | null
  feedbackId: string | null
  pendingCreate: Promise<string> | null
}

interface FeedbackWidgetProps extends FeedbackWidgetConfig {
  /**
   * Additional CSS class name for the container
   */
  className?: string

  /**
   * Additional inline styles for the container
   */
  style?: React.CSSProperties
}

import { cobblWidget } from '@cobbl-ai/feedback-widget'
import type {
  FeedbackWidgetConfig,
  WidgetInstance,
  WidgetPosition,
} from '@cobbl-ai/feedback-widget'

const position: WidgetPosition = 'top-right'

const config: FeedbackWidgetConfig = {
  runId: 'prompt-run-id',
  variant: 'thumbs',
  position,
  onSuccess: (feedbackId: string) => {
    console.log('Feedback ID:', feedbackId)
  },
}

const widget: WidgetInstance = cobblWidget.create(config)
widget.mount('#container')

import { FeedbackWidget } from '@cobbl-ai/feedback-widget/react'
import type { FeedbackWidgetProps } from '@cobbl-ai/feedback-widget/react'

const MyFeedbackWidget = (props: Partial<FeedbackWidgetProps>) => (
  <FeedbackWidget runId="required-run-id" variant="trigger" {...props} />
)

import type { FeedbackWidgetConfig } from '@cobbl-ai/feedback-widget'

const handleSuccess: FeedbackWidgetConfig['onSuccess'] = (feedbackId) => {
  // feedbackId is typed as string
  console.log('Feedback submitted:', feedbackId)
}

const handleError: FeedbackWidgetConfig['onError'] = (error) => {
  // error is typed as Error
  console.error('Feedback failed:', error.message)
}

const config: FeedbackWidgetConfig = {
  runId: 'prompt-run-id',
  onSuccess: handleSuccess,
  onError: handleError,
}

import { FeedbackWidget } from '@cobbl-ai/feedback-widget/react'
import type {
  FeedbackWidgetProps,
  WidgetVariant,
} from '@cobbl-ai/feedback-widget'

interface CustomWidgetProps {
  runId: string
  variant?: WidgetVariant
  showOnlyIfLoaded?: boolean
}

const CustomFeedbackWidget = ({
  runId,
  variant = 'trigger',
  showOnlyIfLoaded = false,
}: CustomWidgetProps) => {
  const [isReady, setIsReady] = useState(!showOnlyIfLoaded)

  useEffect(() => {
    if (showOnlyIfLoaded) {
      // Custom loading logic
      setIsReady(true)
    }
  }, [showOnlyIfLoaded])

  if (!isReady) return null

  return <FeedbackWidget runId={runId} variant={variant} />
}

dist/
├── index.d.ts        # Main types and vanilla JS API
├── index.d.mts       # ESM types
├── react.d.ts        # React component types
└── react.d.mts       # ESM React types

import type { Helpful } from '@cobbl-ai/sdk'

// Helpful = 'helpful' | 'not_helpful'