@ewjdev/anyclick-react 2.0.0 → 4.0.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { ReactNode, CSSProperties } from 'react';
+import * as react from 'react';
+import react__default, { CSSProperties, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
 import { AnyclickAdapter, AnyclickType, AnyclickPayload, ScreenshotConfig, AnyclickTriggerEvent, ScreenshotData, AnyclickMenuEvent } from '@ewjdev/anyclick-core';
 export { ALL_CURATED_PROPERTIES, AccessibilityInfo, AnyclickAdapter, AnyclickPayload, AnyclickType, BoxModelInfo, CURATED_STYLE_PROPERTIES, ComputedStylesInfo, DEFAULT_SCREENSHOT_CONFIG, DEFAULT_SENSITIVE_SELECTORS, ElementContext, ElementInspectInfo, PageContext, ScreenshotCapture, ScreenshotCaptureMode, ScreenshotConfig, ScreenshotData, captureAllScreenshots, captureScreenshot, estimateTotalSize, formatBoxModel, formatBytes, formatStylesAsCSS, getAccessibilityInfo, getAttributes, getBoxModelInfo, getComputedStyles, getElementInspectInfo, isScreenshotSupported } from '@ewjdev/anyclick-core';
 import * as zustand from 'zustand';
@@ -130,7 +130,7 @@ interface InspectSimpleProps {
     onClose: () => void;
     onSelectElement?: (element: Element) => void;
     ideConfig?: Partial<IDEConfig>;
-    style?: React__default.CSSProperties;
+    style?: react__default.CSSProperties;
     className?: string;
     highlightColors?: HighlightColors;
     showBoxModelOverlay?: boolean;
@@ -139,6 +139,160 @@ interface InspectSimpleProps {
 }
 declare function InspectSimple({ visible, targetElement, onClose, ideConfig, style, className, highlightColors, }: InspectSimpleProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Type definitions for QuickChat component.
+ *
+ * @module QuickChat/types
+ * @since 2.0.0
+ */
+
+/**
+ * Context payload chunk that can be included or excluded by the user.
+ */
+interface ContextChunk {
+    /** Unique identifier for the chunk */
+    id: string;
+    /** Human-readable label for the chunk */
+    label: string;
+    /** The actual content/data */
+    content: string;
+    /** Type of context (element, text, error, etc.) */
+    type: "element" | "text" | "error" | "navigation" | "custom";
+    /** Whether this chunk is included in the payload (default: true) */
+    included: boolean;
+    /** Size in characters */
+    size: number;
+}
+/**
+ * A suggested prompt from the AI pre-pass.
+ */
+interface SuggestedPrompt {
+    /** Unique identifier */
+    id: string;
+    /** The prompt text */
+    text: string;
+    /** Optional category */
+    category?: string;
+}
+/**
+ * Quick action available for AI responses.
+ */
+interface QuickAction {
+    /** Unique identifier */
+    id: string;
+    /** Label to display */
+    label: string;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Action handler */
+    onClick: () => void;
+}
+/**
+ * A single chat message.
+ */
+interface ChatMessage {
+    /** Unique identifier */
+    id: string;
+    /** Role of the sender */
+    role: "user" | "assistant" | "system";
+    /** Message content */
+    content: string;
+    /** Timestamp */
+    timestamp: number;
+    /** Whether the message is currently streaming */
+    isStreaming?: boolean;
+    /** Quick actions available for this message */
+    actions?: QuickAction[];
+}
+/**
+ * Configuration for t3.chat integration.
+ */
+interface T3ChatIntegrationConfig {
+    /** Whether to show the "Send to t3.chat" button */
+    enabled?: boolean;
+    /** Base URL for t3.chat (default: https://t3.chat) */
+    baseUrl?: string;
+    /** Label for the button (default: "Ask t3.chat") */
+    label?: string;
+}
+/**
+ * Configuration for the QuickChat component.
+ */
+interface QuickChatConfig {
+    /** API endpoint for chat requests */
+    endpoint?: string;
+    /** Model to use for the main chat (default: auto) */
+    model?: string;
+    /** Model to use for pre-pass suggestions (default: gpt-5-nano) */
+    prePassModel?: string;
+    /** Maximum response length in characters */
+    maxResponseLength?: number;
+    /** Whether to show context redaction UI */
+    showRedactionUI?: boolean;
+    /** Whether to show suggested prompts */
+    showSuggestions?: boolean;
+    /** Custom system prompt */
+    systemPrompt?: string;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Header title */
+    title?: string;
+    /** t3.chat integration settings */
+    t3chat?: T3ChatIntegrationConfig;
+}
+/**
+ * Props for the QuickChat component.
+ */
+interface QuickChatProps {
+    /** Whether the chat is visible */
+    visible: boolean;
+    /** Target element that was right-clicked */
+    targetElement: Element | null;
+    /** Container element */
+    containerElement: Element | null;
+    /** Callback when chat is closed */
+    onClose: () => void;
+    /** Callback when user wants to pin the chat */
+    onPin?: (pinned: boolean) => void;
+    /** Whether the chat is pinned */
+    isPinned?: boolean;
+    /** Configuration options */
+    config?: QuickChatConfig;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Custom class name */
+    className?: string;
+    /** Initial input value (for type-to-chat feature) */
+    initialInput?: string;
+    /** Callback when initial input has been consumed */
+    onInitialInputConsumed?: () => void;
+}
+/**
+ * State for the QuickChat hook.
+ */
+interface QuickChatState {
+    /** Current input value */
+    input: string;
+    /** Chat messages */
+    messages: ChatMessage[];
+    /** Whether we're loading suggestions */
+    isLoadingSuggestions: boolean;
+    /** Whether we're sending a message */
+    isSending: boolean;
+    /** Whether we're streaming a response */
+    isStreaming: boolean;
+    /** Suggested prompts from pre-pass */
+    suggestedPrompts: SuggestedPrompt[];
+    /** Context chunks with redaction state */
+    contextChunks: ContextChunk[];
+    /** Error message if any */
+    error: string | null;
+}
+/**
+ * Default configuration values.
+ */
+declare const DEFAULT_QUICK_CHAT_CONFIG: Required<QuickChatConfig>;
+
 /**
  * Type definitions for @ewjdev/anyclick-react.
  *
@@ -439,6 +593,11 @@ interface AnyclickProviderProps {
     onSubmitError?: (error: Error, payload: AnyclickPayload) => void;
     /** Callback after successful submission */
     onSubmitSuccess?: (payload: AnyclickPayload) => void;
+    /**
+     * Configuration for QuickChat AI assistant.
+     * Set to enable the lightweight AI chat in the context menu.
+     */
+    quickChatConfig?: QuickChatConfig;
     /**
      * Whether to scope this provider to its children only.
      * When true, events will only be captured for elements within this provider's subtree.
@@ -541,6 +700,11 @@ interface ContextMenuProps {
     };
     /** Menu positioning mode (default: 'inView') */
     positionMode?: MenuPositionMode;
+    /**
+     * Configuration for QuickChat AI assistant.
+     * When provided, shows the QuickChat interface in the context menu.
+     */
+    quickChatConfig?: QuickChatConfig;
     /** Configuration for screenshot capture */
     screenshotConfig?: ScreenshotConfig;
     /** Custom styles */
@@ -591,7 +755,7 @@ interface ScreenshotPreviewProps {
  *
  * @since 1.0.0
  */
-declare function AnyclickProvider({ adapter, children, cooldownMs, disabled, header, highlightConfig, maxAncestors, maxInnerTextLength, maxOuterHTMLLength, menuClassName, menuItems, menuStyle, metadata, onSubmitError, onSubmitSuccess, scoped, screenshotConfig, stripAttributes, targetFilter, theme, touchHoldDurationMs, touchMoveThreshold, }: AnyclickProviderProps): react_jsx_runtime.JSX.Element;
+declare function AnyclickProvider({ adapter, children, cooldownMs, disabled, header, highlightConfig, maxAncestors, maxInnerTextLength, maxOuterHTMLLength, menuClassName, menuItems, menuStyle, metadata, onSubmitError, onSubmitSuccess, quickChatConfig, scoped, screenshotConfig, stripAttributes, targetFilter, theme, touchHoldDurationMs, touchMoveThreshold, }: AnyclickProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use {@link AnyclickProvider} instead. Will be removed in v2.0.0.
  */
@@ -617,7 +781,7 @@ declare function FunModeBridge(): null;
  *
  * @since 1.0.0
  */
-declare function ContextMenu({ className, containerElement, footer, header, highlightConfig, isSubmitting, items, onClose, onSelect, position, positionMode, screenshotConfig, style, targetElement, visible, }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ContextMenu({ className, containerElement, footer, header, highlightConfig, isSubmitting, items, onClose, onSelect, position, positionMode, quickChatConfig, screenshotConfig, style, targetElement, visible, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Screenshot preview component - shows captured screenshots before sending.
@@ -628,7 +792,7 @@ declare function ContextMenu({ className, containerElement, footer, header, high
  *
  * @since 1.0.0
  */
-declare const ScreenshotPreview: React__default.NamedExoticComponent<ScreenshotPreviewProps>;
+declare const ScreenshotPreview: react__default.NamedExoticComponent<ScreenshotPreviewProps>;
 
 /**
  * React context for anyclick functionality.
@@ -648,12 +812,12 @@ declare const ScreenshotPreview: React__default.NamedExoticComponent<ScreenshotP
  * @see {@link useAnyclick} for the recommended way to access this context
  * @since 1.0.0
  */
-declare const AnyclickContext: React$1.Context<AnyclickContextValue | null>;
+declare const AnyclickContext: react.Context<AnyclickContextValue | null>;
 /**
  * @deprecated Use {@link AnyclickContext} instead. Will be removed in v2.0.0.
  * @see {@link AnyclickContext}
  */
-declare const FeedbackContext: React$1.Context<AnyclickContextValue | null>;
+declare const FeedbackContext: react.Context<AnyclickContextValue | null>;
 /**
  * Hook to access anyclick context values and methods.
  *
@@ -846,6 +1010,14 @@ declare const useProviderStore: zustand.UseBoundStore<zustand.StoreApi<ProviderS
  */
 declare function dispatchContextMenuEvent(event: MouseEvent, element: Element): void;
 
+declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "default" | "ghost" | "outline" | "destructive";
+    size?: "sm" | "md" | "lg";
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
 /**
  * Available preset role identifiers.
  *
@@ -987,6 +1159,160 @@ declare function createPresetMenu(role: PresetRole, options?: CreatePresetMenuOp
  */
 declare function listPresets(): PresetConfig[];
 
+/**
+ * Creates a menu item for sending selected text or a query to t3.chat.
+ *
+ * Can be added to any custom menu configuration. Uses the current text
+ * selection if available, otherwise opens t3.chat without a pre-filled query.
+ *
+ * @param options - Optional customization for the menu item
+ * @returns A ContextMenuItem configured for t3.chat
+ *
+ * @example
+ * ```tsx
+ * import { createT3ChatMenuItem } from "@ewjdev/anyclick-react";
+ *
+ * const menuItems = [
+ *   { label: "Bug", type: "bug", showComment: true },
+ *   createT3ChatMenuItem(),
+ * ];
+ * ```
+ *
+ * @since 1.5.0
+ */
+declare function createT3ChatMenuItem(options?: {
+    /** Custom label for the menu item */
+    label?: string;
+    /** Base URL for t3.chat */
+    baseUrl?: string;
+}): ContextMenuItem;
+/**
+ * Gets the currently selected text on the page.
+ *
+ * Useful for checking if text is selected before showing certain menu items.
+ *
+ * @returns The selected text, or empty string if nothing is selected
+ *
+ * @example
+ * ```tsx
+ * const selection = getSelectedText();
+ * if (selection) {
+ *   console.log("Selected:", selection);
+ * }
+ * ```
+ *
+ * @since 1.5.0
+ */
+declare function getSelectedText(): string;
+/**
+ * Checks if there is currently any text selected on the page.
+ *
+ * @returns true if text is selected
+ *
+ * @since 1.5.0
+ */
+declare function hasTextSelection(): boolean;
+/**
+ * Detects if an element is or contains an image that can be uploaded.
+ *
+ * Checks for:
+ * - `<img>` elements
+ * - `<picture>` elements
+ * - `<canvas>` elements
+ * - `<svg>` elements
+ * - CSS background images
+ *
+ * @param element - The element to check
+ * @returns Object with isImage flag and optional image source
+ *
+ * @since 1.5.0
+ */
+declare function detectImageElement(element: Element | null): {
+    isImage: boolean;
+    src?: string;
+    type?: "img" | "picture" | "svg" | "canvas" | "background";
+};
+/**
+ * Creates a menu item for uploading images to UploadThing.
+ *
+ * The menu item will upload the target element if it's an image,
+ * or a screenshot of the element otherwise.
+ *
+ * Requires an UploadThing adapter to be configured. The onClick handler
+ * receives the target element and can use detectImageElement to determine
+ * if it's an image.
+ *
+ * @param options - Configuration options
+ * @returns A ContextMenuItem configured for UploadThing
+ *
+ * @example
+ * ```tsx
+ * import { createUploadThingMenuItem } from "@ewjdev/anyclick-react";
+ *
+ * const menuItems = [
+ *   createUploadThingMenuItem({
+ *     endpoint: "/api/uploadthing",
+ *     onUploadComplete: (result) => {
+ *       console.log("Uploaded:", result.url);
+ *     },
+ *   }),
+ * ];
+ * ```
+ *
+ * @since 1.5.0
+ */
+declare function createUploadThingMenuItem(options?: {
+    /** Custom label for the menu item */
+    label?: string;
+    /** API endpoint for uploading */
+    endpoint?: string;
+    /** Callback when upload completes */
+    onUploadComplete?: (result: {
+        url?: string;
+        error?: string;
+    }) => void;
+    /** Callback when upload fails */
+    onUploadError?: (error: Error) => void;
+}): ContextMenuItem;
+/**
+ * Creates a menu item for uploading screenshots to UploadThing.
+ *
+ * This captures a screenshot of the target element and uploads it.
+ * Requires the screenshot preview to be enabled for best results.
+ *
+ * @param options - Configuration options
+ * @returns A ContextMenuItem configured for screenshot uploads
+ *
+ * @example
+ * ```tsx
+ * import { createUploadScreenshotMenuItem } from "@ewjdev/anyclick-react";
+ *
+ * const menuItems = [
+ *   createUploadScreenshotMenuItem({
+ *     endpoint: "/api/uploadthing",
+ *     onUploadComplete: (result) => {
+ *       navigator.clipboard.writeText(result.url);
+ *     },
+ *   }),
+ * ];
+ * ```
+ *
+ * @since 1.5.0
+ */
+declare function createUploadScreenshotMenuItem(options?: {
+    /** Custom label for the menu item */
+    label?: string;
+    /** API endpoint for uploading */
+    endpoint?: string;
+    /** Callback when upload completes */
+    onUploadComplete?: (result: {
+        url?: string;
+        error?: string;
+    }) => void;
+    /** Callback when upload fails */
+    onUploadError?: (error: Error) => void;
+}): ContextMenuItem;
+
 /**
  * Style definitions for anyclick-react components.
  *
@@ -1227,7 +1553,7 @@ interface InspectDialogManagerProps {
     /** IDE configuration for "Open in IDE" feature */
     ideConfig?: Partial<IDEConfig>;
     /** Custom styles for the dialog */
-    dialogStyle?: React__default.CSSProperties;
+    dialogStyle?: react__default.CSSProperties;
     /** Custom class name for the dialog */
     dialogClassName?: string;
     /** Custom highlight colors for the element highlight */
@@ -1267,7 +1593,7 @@ interface AnyclickLogoProps {
     /** Custom class name */
     className?: string;
     /** Custom styles */
-    style?: React__default.CSSProperties;
+    style?: react__default.CSSProperties;
     /** Click handler */
     onClick?: () => void;
 }
@@ -1277,4 +1603,86 @@ interface AnyclickLogoProps {
  */
 declare function AnyclickLogo({ size, borderWidth, primaryColor, backgroundColor, className, style, onClick, }: AnyclickLogoProps): react_jsx_runtime.JSX.Element;
 
-export { AnyclickContext, type AnyclickContextValue, AnyclickLogo, type AnyclickLogoProps, AnyclickProvider, type AnyclickProviderProps, type AnyclickTheme, type AnyclickUserContext, type CompactModeConfig, ContextMenu, type ContextMenuItem, type ContextMenuProps, type CreatePresetMenuOptions, DEFAULT_COMPACT_CONFIG, FeedbackContext, type FeedbackMenuBadge, type FeedbackMenuStatus, FeedbackProvider, FunModeBridge, type FunModeThemeConfig, type HighlightColors, type HighlightConfig, type IDEConfig, type IDEProtocol, INSPECT_DIALOG_EVENT, type InspectDialogEventDetail, InspectDialogManager, type InspectDialogManagerProps, InspectSimple, type InspectSimpleProps, type MenuPositionMode, type PinnedPosition, type PresetConfig, type PresetRole, type ProviderInstance, ScreenshotPreview, type ScreenshotPreviewProps, type SourceLocation, applyHighlights, buildIDEUrl, clearHighlights, createIDEOpener, createPresetMenu, darkMenuStyles, defaultContainerSelectors, defaultHighlightColors, detectPreferredIDE, dispatchContextMenuEvent, filterMenuItemsByRole, findContainerParent, findSourceLocationInAncestors, formatSourceLocation, generateProviderId, getBadgeStyle, getSourceLocationFromElement, highlightContainer, highlightTarget, isIDEProtocolSupported, listPresets, menuCSSVariables, menuStyles, openInIDE, openInspectDialog, presetDefaults, useAnyclick, useFeedback, useProviderStore };
+/**
+ * QuickChat component.
+ */
+declare function QuickChat({ visible, targetElement, containerElement, onClose, onPin, isPinned: isPinnedProp, config, style, className, initialInput, onInitialInputConsumed, }: QuickChatProps): react_jsx_runtime.JSX.Element | null;
+
+type DebugInfo = {
+    status: number;
+    ok: boolean;
+    contentType: string | null;
+    rawTextPreview: string;
+    parsedKeys?: string[];
+    contentPreview?: string;
+    payloadPreview?: string;
+    timestamp: number;
+    error?: string;
+};
+
+type RateLimitNotice = {
+    status: 429;
+    message: string;
+    retryAt?: number;
+    retryAfterSeconds?: number;
+    requestId?: string;
+    endpoint?: string;
+    raw?: string;
+};
+
+/**
+ * Hook for managing QuickChat state and interactions.
+ * Uses ai-sdk-ui for streaming and zustand for persistence.
+ */
+declare function useQuickChat(targetElement: Element | null, containerElement: Element | null, config?: QuickChatConfig): {
+    input: string;
+    messages: ChatMessage[];
+    isLoadingSuggestions: boolean;
+    isSending: boolean;
+    isStreaming: boolean;
+    suggestedPrompts: SuggestedPrompt[];
+    contextChunks: ContextChunk[];
+    error: string | null;
+    debugInfo: DebugInfo | null;
+    rateLimitNotice: RateLimitNotice | null;
+    isPinned: boolean;
+    lastSyncedAt: number | null;
+    config: {
+        endpoint: string;
+        model: string;
+        prePassModel: string;
+        maxResponseLength: number;
+        showRedactionUI: boolean;
+        showSuggestions: boolean;
+        systemPrompt: string;
+        placeholder: string;
+        title: string;
+        t3chat: T3ChatIntegrationConfig;
+    };
+    setInput: (input: string) => void;
+    toggleChunk: (chunkId: string) => void;
+    toggleAllChunks: (included: boolean) => void;
+    selectSuggestion: (prompt: SuggestedPrompt) => void;
+    sendMessage: (messageText?: string) => Promise<void>;
+    clearMessages: () => void;
+    setIsPinned: (pinned: boolean) => void;
+    clearRateLimitNotice: () => void;
+};
+
+/**
+ * Style definitions for QuickChat component.
+ *
+ * @module QuickChat/styles
+ * @since 2.0.0
+ */
+
+/**
+ * QuickChat component styles.
+ */
+declare const quickChatStyles: Record<string, CSSProperties>;
+/**
+ * CSS keyframes for animations (to be injected).
+ */
+declare const quickChatKeyframes = "\n@keyframes blink {\n  0%, 50% { opacity: 1; }\n  51%, 100% { opacity: 0; }\n}\n\n@keyframes bounce {\n  0%, 80%, 100% { transform: scale(0); }\n  40% { transform: scale(1); }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInFromRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutToRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n";
+
+export { AnyclickContext, type AnyclickContextValue, AnyclickLogo, type AnyclickLogoProps, AnyclickProvider, type AnyclickProviderProps, type AnyclickTheme, type AnyclickUserContext, Button, type ChatMessage, type CompactModeConfig, type ContextChunk, ContextMenu, type ContextMenuItem, type ContextMenuProps, type CreatePresetMenuOptions, DEFAULT_COMPACT_CONFIG, DEFAULT_QUICK_CHAT_CONFIG, FeedbackContext, type FeedbackMenuBadge, type FeedbackMenuStatus, FeedbackProvider, FunModeBridge, type FunModeThemeConfig, type HighlightColors, type HighlightConfig, type IDEConfig, type IDEProtocol, INSPECT_DIALOG_EVENT, Input, type InspectDialogEventDetail, InspectDialogManager, type InspectDialogManagerProps, InspectSimple, type InspectSimpleProps, type MenuPositionMode, type PinnedPosition, type PresetConfig, type PresetRole, type ProviderInstance, type QuickAction, QuickChat, type QuickChatConfig, type QuickChatProps, type QuickChatState, ScreenshotPreview, type ScreenshotPreviewProps, type SourceLocation, type SuggestedPrompt, type T3ChatIntegrationConfig, applyHighlights, buildIDEUrl, clearHighlights, createIDEOpener, createPresetMenu, createT3ChatMenuItem, createUploadScreenshotMenuItem, createUploadThingMenuItem, darkMenuStyles, defaultContainerSelectors, defaultHighlightColors, detectImageElement, detectPreferredIDE, dispatchContextMenuEvent, filterMenuItemsByRole, findContainerParent, findSourceLocationInAncestors, formatSourceLocation, generateProviderId, getBadgeStyle, getSelectedText, getSourceLocationFromElement, hasTextSelection, highlightContainer, highlightTarget, isIDEProtocolSupported, listPresets, menuCSSVariables, menuStyles, openInIDE, openInspectDialog, presetDefaults, quickChatKeyframes, quickChatStyles, useAnyclick, useFeedback, useProviderStore, useQuickChat };