@ewjdev/anyclick-react 2.0.0 → 4.0.0

package/dist/index.mjs

@@ -2,18 +2,18 @@
 
 // src/AnyclickProvider.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect2,
+  useCallback as useCallback4,
+  useEffect as useEffect4,
   useId,
   useLayoutEffect,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState3
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState5
 } from "react";
 import { createAnyclickClient } from "@ewjdev/anyclick-core";
 
 // src/ContextMenu.tsx
-import React2, { useCallback, useEffect, useRef, useState as useState2 } from "react";
+import React3, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import {
   DEFAULT_SCREENSHOT_CONFIG,
   captureAllScreenshots,
@@ -26,11 +26,1884 @@ import {
   FlagIcon,
   GripVertical,
   PlusIcon,
+  Sparkles,
   ThumbsUpIcon
 } from "lucide-react";
 
+// src/QuickChat/QuickChat.tsx
+import React, {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { buildAnyclickPayload } from "@ewjdev/anyclick-core";
+import {
+  AlertCircle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronUp,
+  Copy,
+  ExternalLink,
+  Pin,
+  PinOff,
+  RefreshCw,
+  Send,
+  X
+} from "lucide-react";
+
+// src/QuickChat/styles.ts
+var quickChatStyles = {
+  // Inline container - inside the context menu
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    maxHeight: "320px",
+    overflow: "hidden"
+  },
+  // Pinned drawer - anchored to right side of screen
+  pinnedContainer: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: "340px",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "var(--anyclick-menu-bg, #ffffff)",
+    borderLeft: "1px solid var(--anyclick-menu-border, #e5e5e5)",
+    boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.15)",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: "14px",
+    overflow: "hidden",
+    zIndex: 9998
+  },
+  // Pinned messages area (taller)
+  pinnedMessagesArea: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    minHeight: "200px"
+  },
+  // Header - minimal design
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 8px",
+    gap: "8px"
+  },
+  headerTitle: {
+    fontSize: "11px",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    color: "var(--anyclick-menu-text-muted, #666)"
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2px"
+  },
+  iconButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "24px",
+    height: "24px",
+    border: "none",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "var(--anyclick-menu-text-muted, #666)",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  iconButtonActive: {
+    backgroundColor: "var(--anyclick-menu-accent, #0066cc)",
+    color: "#fff"
+  },
+  // Context badge in header
+  contextBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "3px 8px",
+    fontSize: "10px",
+    fontWeight: 500,
+    border: "1px solid var(--anyclick-menu-border, #e5e5e5)",
+    borderRadius: "10px",
+    backgroundColor: "transparent",
+    color: "var(--anyclick-menu-text-muted, #666)",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  contextBadgeActive: {
+    borderColor: "var(--anyclick-menu-accent, #0066cc)",
+    backgroundColor: "rgba(0, 102, 204, 0.08)"
+  },
+  // Context dropdown (in normal flow, not absolute)
+  contextDropdown: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    padding: "6px 8px",
+    margin: "0 8px 6px 8px",
+    backgroundColor: "var(--anyclick-menu-hover, #f5f5f5)",
+    borderRadius: "6px",
+    maxHeight: "80px",
+    overflowY: "auto"
+  },
+  // Messages area
+  messagesArea: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "8px 12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    minHeight: "40px",
+    maxHeight: "140px"
+  },
+  emptyState: {
+    display: "none"
+    // Hide empty state, placeholder in input is enough
+  },
+  // Message bubble
+  message: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    maxWidth: "100%"
+  },
+  messageUser: {
+    alignSelf: "flex-end",
+    backgroundColor: "var(--anyclick-menu-accent, #0066cc)",
+    color: "#fff",
+    padding: "6px 10px",
+    borderRadius: "12px 12px 4px 12px",
+    fontSize: "13px",
+    maxWidth: "85%",
+    wordBreak: "break-word"
+  },
+  messageAssistant: {
+    alignSelf: "flex-start",
+    backgroundColor: "var(--anyclick-menu-hover, #f5f5f5)",
+    color: "var(--anyclick-menu-text, #333)",
+    padding: "8px 10px",
+    borderRadius: "12px 12px 12px 4px",
+    fontSize: "13px",
+    maxWidth: "100%",
+    wordBreak: "break-word",
+    lineHeight: 1.4
+  },
+  messageActions: {
+    display: "flex",
+    gap: "4px",
+    marginTop: "4px",
+    flexWrap: "wrap"
+  },
+  actionButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "3px 8px",
+    fontSize: "11px",
+    fontWeight: 500,
+    border: "1px solid var(--anyclick-menu-border, #e5e5e5)",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "var(--anyclick-menu-text-muted, #666)",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  streamingIndicator: {
+    display: "inline-block",
+    width: "4px",
+    height: "14px",
+    backgroundColor: "var(--anyclick-menu-accent, #0066cc)",
+    borderRadius: "1px",
+    animation: "blink 1s infinite"
+  },
+  // Suggestions - compact horizontal scroll
+  suggestionsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    padding: "6px 8px",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "none",
+    msOverflowStyle: "none"
+  },
+  suggestionChip: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "4px 10px",
+    fontSize: "11px",
+    border: "1px solid var(--anyclick-menu-border, #e5e5e5)",
+    borderRadius: "12px",
+    backgroundColor: "var(--anyclick-menu-hover, #f5f5f5)",
+    color: "var(--anyclick-menu-text, #333)",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    whiteSpace: "nowrap",
+    flexShrink: 0
+  },
+  suggestionChipHover: {
+    backgroundColor: "var(--anyclick-menu-bg, #fff)",
+    borderColor: "var(--anyclick-menu-accent, #0066cc)"
+  },
+  // Context redaction - now in dropdown
+  contextContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  contextHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "4px"
+  },
+  contextTitle: {
+    fontSize: "10px",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    color: "var(--anyclick-menu-text-muted, #666)"
+  },
+  contextToggle: {
+    fontSize: "10px",
+    color: "var(--anyclick-menu-accent, #0066cc)",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: 0
+  },
+  contextToggleSmall: {
+    fontSize: "9px",
+    fontWeight: 500,
+    color: "var(--anyclick-menu-text-muted, #666)",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: "2px 4px",
+    borderRadius: "3px",
+    transition: "all 0.15s ease"
+  },
+  contextChunks: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  contextChunk: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "4px 6px",
+    borderRadius: "4px",
+    fontSize: "11px",
+    backgroundColor: "var(--anyclick-menu-hover, #f5f5f5)",
+    cursor: "pointer",
+    transition: "opacity 0.15s ease"
+  },
+  contextChunkCompact: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "2px 4px",
+    borderRadius: "3px",
+    fontSize: "10px",
+    cursor: "pointer",
+    transition: "opacity 0.15s ease"
+  },
+  contextChunkExcluded: {
+    opacity: 0.5,
+    textDecoration: "line-through"
+  },
+  contextCheckbox: {
+    width: "12px",
+    height: "12px",
+    accentColor: "var(--anyclick-menu-accent, #0066cc)"
+  },
+  contextLabel: {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "var(--anyclick-menu-text, #333)"
+  },
+  contextSize: {
+    fontSize: "10px",
+    color: "var(--anyclick-menu-text-muted, #666)"
+  },
+  // Input area
+  inputContainer: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "8px",
+    padding: "8px"
+  },
+  input: {
+    flex: 1,
+    padding: "8px 12px",
+    fontSize: "13px",
+    border: "1px solid var(--anyclick-menu-input-border, #ddd)",
+    borderRadius: "18px",
+    backgroundColor: "var(--anyclick-menu-input-bg, #fff)",
+    color: "var(--anyclick-menu-text, #333)",
+    outline: "none",
+    resize: "none",
+    fontFamily: "inherit",
+    lineHeight: 1.4,
+    maxHeight: "80px",
+    minHeight: "36px"
+  },
+  inputFocused: {
+    borderColor: "var(--anyclick-menu-accent, #0066cc)",
+    boxShadow: "0 0 0 2px rgba(0, 102, 204, 0.1)"
+  },
+  sendButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    border: "none",
+    borderRadius: "50%",
+    backgroundColor: "var(--anyclick-menu-accent, #0066cc)",
+    color: "#fff",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    flexShrink: 0
+  },
+  sendButtonDisabled: {
+    backgroundColor: "var(--anyclick-menu-border, #e5e5e5)",
+    cursor: "not-allowed"
+  },
+  // Loading states
+  loadingDots: {
+    display: "flex",
+    gap: "4px",
+    padding: "8px"
+  },
+  loadingDot: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    backgroundColor: "var(--anyclick-menu-text-muted, #666)",
+    animation: "bounce 1.4s infinite ease-in-out both"
+  },
+  // Error states
+  errorContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8px",
+    padding: "16px",
+    textAlign: "center"
+  },
+  errorIcon: {
+    color: "#ef4444"
+  },
+  errorText: {
+    fontSize: "12px",
+    color: "#ef4444",
+    maxWidth: "200px"
+  },
+  errorRetry: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "4px 10px",
+    fontSize: "11px",
+    fontWeight: 500,
+    border: "1px solid #ef4444",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "#ef4444",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  // Truncation indicator
+  truncated: {
+    fontSize: "10px",
+    color: "var(--anyclick-menu-text-muted, #666)",
+    fontStyle: "italic",
+    marginTop: "4px"
+  }
+};
+var quickChatKeyframes = `
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutToRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+`;
+
+// src/QuickChat/useQuickChat.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+
+// src/QuickChat/store.ts
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+var STORE_NAME = "anyclick-quick-chat-store";
+var TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1e3;
+function generateMessageId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+var storage = createJSONStorage(() => localStorage);
+function filterExpiredMessages(messages) {
+  const now = Date.now();
+  return messages.filter((msg) => msg.expiresAt > now);
+}
+var useQuickChatStore = create()(
+  persist(
+    (set, get) => ({
+      messages: [],
+      isPinned: false,
+      input: "",
+      contextChunks: [],
+      suggestedPrompts: [],
+      isLoadingSuggestions: false,
+      isSending: false,
+      isStreaming: false,
+      error: null,
+      lastSyncedAt: null,
+      setInput: (input) => set({ input }),
+      addMessage: (message) => {
+        const id = generateMessageId();
+        const now = Date.now();
+        const storedMessage = {
+          ...message,
+          id,
+          timestamp: now,
+          expiresAt: now + TWENTY_FOUR_HOURS_MS
+        };
+        set((state) => {
+          const newMessages = [...state.messages, storedMessage];
+          return {
+            messages: newMessages
+          };
+        });
+        return id;
+      },
+      updateMessage: (id, updates) => {
+        set((state) => ({
+          messages: state.messages.map(
+            (msg) => msg.id === id ? { ...msg, ...updates } : msg
+          )
+        }));
+      },
+      clearMessages: () => set({ messages: [], error: null }),
+      setIsPinned: (pinned) => set({ isPinned: pinned }),
+      setContextChunks: (chunks) => set({ contextChunks: chunks }),
+      toggleChunk: (chunkId) => {
+        set((state) => ({
+          contextChunks: state.contextChunks.map(
+            (chunk) => chunk.id === chunkId ? { ...chunk, included: !chunk.included } : chunk
+          )
+        }));
+      },
+      toggleAllChunks: (included) => {
+        set((state) => ({
+          contextChunks: state.contextChunks.map((chunk) => ({
+            ...chunk,
+            included
+          }))
+        }));
+      },
+      setSuggestedPrompts: (prompts) => set({ suggestedPrompts: prompts }),
+      setIsLoadingSuggestions: (loading) => set({ isLoadingSuggestions: loading }),
+      setIsSending: (sending) => set({ isSending: sending }),
+      setIsStreaming: (streaming) => set({ isStreaming: streaming }),
+      setError: (error) => set({ error }),
+      setLastSyncedAt: (timestamp) => set({ lastSyncedAt: timestamp }),
+      pruneExpiredMessages: () => {
+        set((state) => ({
+          messages: filterExpiredMessages(state.messages)
+        }));
+      },
+      getActiveMessages: () => {
+        const state = get();
+        const now = Date.now();
+        const active = state.messages.filter((msg) => msg.expiresAt > now).map(({ expiresAt, ...msg }) => msg);
+        console.log("[store] getActiveMessages", {
+          totalMessages: state.messages.length,
+          activeMessages: active.length,
+          activeIds: active.map((m) => m.id)
+        });
+        return active;
+      },
+      hydrate: (messages) => {
+        const now = Date.now();
+        const storedMessages = messages.map((msg) => ({
+          ...msg,
+          expiresAt: now + TWENTY_FOUR_HOURS_MS
+        }));
+        set({ messages: storedMessages, lastSyncedAt: now });
+      }
+    }),
+    {
+      name: STORE_NAME,
+      storage,
+      partialize: (state) => ({
+        messages: state.messages,
+        isPinned: state.isPinned,
+        lastSyncedAt: state.lastSyncedAt
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.pruneExpiredMessages();
+        }
+      }
+    }
+  )
+);
+function useActiveMessages() {
+  const messages = useQuickChatStore((state) => state.messages);
+  const now = Date.now();
+  return messages.filter((msg) => msg.expiresAt > now).map(({ expiresAt, ...msg }) => msg);
+}
+
+// src/QuickChat/types.ts
+var DEFAULT_T3CHAT_CONFIG = {
+  enabled: true,
+  baseUrl: "https://t3.chat",
+  label: "Ask t3.chat"
+};
+var DEFAULT_QUICK_CHAT_CONFIG = {
+  endpoint: "/api/anyclick/chat",
+  model: "gpt-5-nano",
+  prePassModel: "gpt-5-nano",
+  maxResponseLength: 1e4,
+  showRedactionUI: true,
+  showSuggestions: true,
+  systemPrompt: "You are a helpful assistant that provides quick, concise answers about web elements and UI. Keep responses brief and actionable.",
+  placeholder: "Ask about this element...",
+  title: "Quick Ask",
+  t3chat: DEFAULT_T3CHAT_CONFIG
+};
+
+// src/QuickChat/useQuickChat.context.ts
+import { getElementInspectInfo } from "@ewjdev/anyclick-core";
+function extractContextChunks(targetElement, _containerElement) {
+  const chunks = [];
+  if (!targetElement) return chunks;
+  try {
+    const info = getElementInspectInfo(targetElement);
+    const tagContent = `<${info.tagName.toLowerCase()}${info.id ? ` id="${info.id}"` : ""}${info.classNames.length > 0 ? ` class="${info.classNames.join(" ")}"` : ""}>`;
+    chunks.push({
+      id: "element-tag",
+      label: "Element Tag",
+      content: tagContent,
+      type: "element",
+      included: true,
+      size: tagContent.length
+    });
+    if (info.innerText && info.innerText.length > 0) {
+      const textContent = info.innerText.slice(0, 200);
+      chunks.push({
+        id: "element-text",
+        label: "Text Content",
+        content: textContent,
+        type: "text",
+        included: true,
+        size: textContent.length
+      });
+    }
+    if (info.computedStyles) {
+      const styleEntries = [];
+      for (const [, styles] of Object.entries(info.computedStyles)) {
+        if (styles && typeof styles === "object") {
+          const entries = Object.entries(styles).slice(0, 2);
+          for (const [k, v] of entries) {
+            if (v) styleEntries.push(`${k}: ${v}`);
+          }
+        }
+        if (styleEntries.length >= 8) break;
+      }
+      const stylesContent = styleEntries.join("; ");
+      if (stylesContent) {
+        chunks.push({
+          id: "element-styles",
+          label: "Key Styles",
+          content: stylesContent,
+          type: "element",
+          included: true,
+          size: stylesContent.length
+        });
+      }
+    }
+    if (info.accessibility) {
+      const a11yContent = [
+        info.accessibility.role && `role="${info.accessibility.role}"`,
+        info.accessibility.accessibleName && `aria-label="${info.accessibility.accessibleName}"`
+      ].filter(Boolean).join(", ");
+      if (a11yContent) {
+        chunks.push({
+          id: "element-a11y",
+          label: "Accessibility",
+          content: a11yContent,
+          type: "element",
+          included: true,
+          size: a11yContent.length
+        });
+      }
+    }
+    if (info.boxModel) {
+      const boxContent = `${Math.round(info.boxModel.content.width)}x${Math.round(
+        info.boxModel.content.height
+      )}px`;
+      chunks.push({
+        id: "element-dimensions",
+        label: "Dimensions",
+        content: boxContent,
+        type: "element",
+        included: true,
+        size: boxContent.length
+      });
+    }
+  } catch (error) {
+    console.error("[useQuickChat] Failed to extract context:", error);
+  }
+  return chunks;
+}
+function buildContextString(chunks) {
+  const included = chunks.filter((c) => c.included);
+  if (included.length === 0) return "";
+  return included.map((c) => `[${c.label}]: ${c.content}`).join("\n");
+}
+
+// src/QuickChat/useQuickChat.debug.ts
+function createDebugInfo(args) {
+  return {
+    status: args.status,
+    ok: args.ok,
+    contentType: args.contentType ?? null,
+    rawTextPreview: args.rawText ?? "",
+    timestamp: Date.now(),
+    error: args.error
+  };
+}
+
+// src/QuickChat/useQuickChat.messages.ts
+function getUIMessageText(msg) {
+  const partsText = msg.parts?.map((p) => {
+    const part = p;
+    if (typeof part.text === "string") return part.text;
+    if (typeof part.content === "string") return part.content;
+    return "";
+  }).join("") ?? "";
+  if (partsText) return partsText;
+  const maybeContent = msg.content;
+  return typeof maybeContent === "string" ? maybeContent : "";
+}
+function chatMessagesToUiMessages(messages) {
+  return messages.map((msg) => ({
+    id: msg.id,
+    role: msg.role,
+    parts: [{ type: "text", text: msg.content }]
+  }));
+}
+function safeCopyToClipboard(text) {
+  try {
+    if (typeof navigator === "undefined") return;
+    void navigator.clipboard.writeText(text);
+  } catch {
+  }
+}
+function buildAssistantActions(messageText, setInput) {
+  return [
+    {
+      id: "copy",
+      label: "Copy",
+      onClick: () => safeCopyToClipboard(messageText)
+    },
+    {
+      id: "research",
+      label: "Research more",
+      onClick: () => setInput(`Tell me more about: ${messageText.slice(0, 50)}`)
+    }
+  ];
+}
+function uiMessagesToChatMessages(args) {
+  const { uiMessages, status, setInput } = args;
+  const last = uiMessages[uiMessages.length - 1];
+  return uiMessages.map((msg) => {
+    const text = getUIMessageText(msg);
+    const isStreaming = status === "streaming" && msg.role === "assistant" && msg === last;
+    const actions = msg.role === "assistant" && status === "ready" ? buildAssistantActions(text, setInput) : void 0;
+    return {
+      id: msg.id,
+      role: msg.role,
+      content: text,
+      timestamp: Date.now(),
+      isStreaming,
+      actions
+    };
+  });
+}
+
+// src/QuickChat/useQuickChat.rateLimit.ts
+function safeJsonParse(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+function formatRetryAt(retryAtMs) {
+  try {
+    const d = new Date(retryAtMs);
+    return new Intl.DateTimeFormat(void 0, {
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(d);
+  } catch {
+    return new Date(retryAtMs).toLocaleTimeString();
+  }
+}
+function getRequestIdFromHeaders(res) {
+  return res?.headers?.get?.("X-Anyclick-Request-Id") ?? res?.headers?.get?.("x-anyclick-request-id") ?? void 0;
+}
+function parseRetryAfterSeconds(args) {
+  const { payload, res } = args;
+  if (typeof payload?.retryAfterSeconds === "number")
+    return payload.retryAfterSeconds;
+  const headerRetryAfter = res?.headers?.get?.("Retry-After");
+  if (!headerRetryAfter) return void 0;
+  const n = Number(headerRetryAfter);
+  return Number.isFinite(n) ? n : void 0;
+}
+function parseRetryAt(args) {
+  const { payload, retryAfterSeconds, nowMs } = args;
+  if (typeof payload?.retryAt === "number" && Number.isFinite(payload.retryAt)) {
+    return payload.retryAt;
+  }
+  if (typeof retryAfterSeconds === "number" && Number.isFinite(retryAfterSeconds)) {
+    return nowMs + Math.max(0, retryAfterSeconds) * 1e3;
+  }
+  return void 0;
+}
+function buildNotice(args) {
+  const { rawText, endpoint, res, nowMs } = args;
+  const parsed = safeJsonParse(rawText);
+  const payload = parsed && typeof parsed === "object" ? parsed : null;
+  const retryAfterSeconds = parseRetryAfterSeconds({ payload, res });
+  const retryAt = parseRetryAt({ payload, retryAfterSeconds, nowMs });
+  const timePart = retryAt ? `Try again at ${formatRetryAt(retryAt)}.` : "";
+  const message = timePart ? `Rate limited. ${timePart}` : "Rate limited.";
+  const requestId = payload?.requestId ?? getRequestIdFromHeaders(res);
+  return {
+    status: 429,
+    message,
+    retryAt,
+    retryAfterSeconds,
+    requestId,
+    endpoint,
+    raw: rawText
+  };
+}
+async function rateLimitNoticeFromResponse(res, endpoint) {
+  if (res.status !== 429) return null;
+  const raw = await res.text().catch(() => "");
+  return buildNotice({ rawText: raw, endpoint, res, nowMs: Date.now() });
+}
+function rateLimitNoticeFromError(args) {
+  const { statusCode, response, responseText, endpoint } = args;
+  if (statusCode !== 429) return null;
+  const raw = responseText ?? "";
+  return buildNotice({
+    rawText: raw,
+    endpoint,
+    res: response,
+    nowMs: Date.now()
+  });
+}
+
+// src/QuickChat/useQuickChat.ts
+function useQuickChat(targetElement, containerElement, config = {}) {
+  console.count("useQuickChat");
+  const mergedConfig = { ...DEFAULT_QUICK_CHAT_CONFIG, ...config };
+  const initializedRef = useRef(false);
+  const syncTimeoutRef = useRef(null);
+  const [manualSending, setManualSending] = useState(false);
+  const [debugInfo, setDebugInfo] = useState(null);
+  const [rateLimitNotice, setRateLimitNotice] = useState(null);
+  const {
+    input,
+    setInput,
+    isPinned,
+    setIsPinned,
+    contextChunks,
+    setContextChunks,
+    toggleChunk,
+    toggleAllChunks,
+    suggestedPrompts,
+    setSuggestedPrompts,
+    isLoadingSuggestions,
+    setIsLoadingSuggestions,
+    error,
+    setError,
+    addMessage,
+    clearMessages: storeClearMessages,
+    setLastSyncedAt,
+    lastSyncedAt,
+    setIsSending: setStoreIsSending,
+    setIsStreaming: setStoreIsStreaming
+  } = useQuickChatStore();
+  const storedMessages = useActiveMessages();
+  const contextString = useMemo(
+    () => buildContextString(contextChunks),
+    [contextChunks]
+  );
+  const chatBody = useMemo(
+    () => ({
+      action: "chat",
+      context: contextString,
+      model: mergedConfig.model,
+      systemPrompt: mergedConfig.systemPrompt,
+      maxLength: mergedConfig.maxResponseLength
+    }),
+    [
+      contextString,
+      mergedConfig.model,
+      mergedConfig.systemPrompt,
+      mergedConfig.maxResponseLength
+    ]
+  );
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: mergedConfig.endpoint,
+      body: chatBody
+    }),
+    [mergedConfig.endpoint, chatBody]
+  );
+  const handleRateLimitResponse = useCallback(
+    async (res, endpoint) => {
+      const notice = await rateLimitNoticeFromResponse(res, endpoint);
+      if (!notice) return false;
+      setRateLimitNotice(notice);
+      setError(null);
+      return true;
+    },
+    [setError]
+  );
+  const scheduleBackendSync = useCallback(() => {
+    if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+    syncTimeoutRef.current = setTimeout(async () => {
+      try {
+        const currentMessages = useQuickChatStore.getState().getActiveMessages();
+        if (currentMessages.length === 0) return;
+        const endpoint = `${mergedConfig.endpoint}/history`;
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "save",
+            messages: currentMessages
+          })
+        });
+        if (await handleRateLimitResponse(res, endpoint)) return;
+        if (res.ok) setLastSyncedAt(Date.now());
+      } catch (err) {
+        console.error("[useQuickChat] Failed to sync chat history:", err);
+      }
+    }, 1e3);
+  }, [handleRateLimitResponse, mergedConfig.endpoint, setLastSyncedAt]);
+  const {
+    messages: aiMessages,
+    sendMessage: aiSendMessage,
+    status,
+    stop,
+    setMessages: setAiMessages
+  } = useChat({
+    transport,
+    onError: (err) => {
+      const response = err.response ?? void 0;
+      const statusCode = err.status ?? (response ? response.status : void 0) ?? -1;
+      const responseText = err.responseText ?? err.message ?? "";
+      setDebugInfo(
+        createDebugInfo({
+          status: statusCode,
+          ok: false,
+          contentType: response?.headers?.get?.("content-type") ?? null,
+          rawText: responseText,
+          error: err.message
+        })
+      );
+      setStoreIsStreaming(false);
+      setStoreIsSending(false);
+      const notice = rateLimitNoticeFromError({
+        statusCode,
+        response,
+        responseText,
+        endpoint: mergedConfig.endpoint
+      });
+      if (notice) {
+        setRateLimitNotice(notice);
+        setError(null);
+        return;
+      }
+      setRateLimitNotice(null);
+      setError(err.message);
+    },
+    onFinish: ({ message }) => {
+      const messageText = getUIMessageText(message);
+      const current = useQuickChatStore.getState().getActiveMessages();
+      const last = current[current.length - 1];
+      const alreadyHaveSameTail = last?.role === "assistant" && last.content === messageText;
+      if (!alreadyHaveSameTail && messageText) {
+        addMessage({
+          role: message.role,
+          content: messageText,
+          isStreaming: false
+        });
+      }
+      scheduleBackendSync();
+      setStoreIsStreaming(false);
+      setStoreIsSending(false);
+    }
+  });
+  const loadFromBackend = useCallback(async () => {
+    try {
+      const endpoint = `${mergedConfig.endpoint}/history`;
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "load" })
+      });
+      if (await handleRateLimitResponse(response, endpoint)) return;
+      if (!response.ok) return;
+      const data = await response.json().catch(() => null);
+      if (!data?.messages || !Array.isArray(data.messages)) return;
+      if (data.messages.length === 0) return;
+      useQuickChatStore.getState().hydrate(data.messages);
+      setAiMessages(chatMessagesToUiMessages(data.messages));
+    } catch (err) {
+      console.error("[useQuickChat] Failed to load chat history:", err);
+    }
+  }, [handleRateLimitResponse, mergedConfig.endpoint, setAiMessages]);
+  const messages = useMemo(
+    () => uiMessagesToChatMessages({
+      uiMessages: aiMessages,
+      status,
+      setInput
+    }),
+    [aiMessages, setInput, status]
+  );
+  const isStreaming = status === "streaming";
+  const isSending = status === "submitted" || status === "streaming" || manualSending;
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    if (storedMessages.length > 0) {
+      setAiMessages(chatMessagesToUiMessages(storedMessages));
+    } else {
+      void loadFromBackend();
+    }
+  }, [loadFromBackend, setAiMessages, storedMessages]);
+  useEffect(() => {
+    if (!targetElement) return;
+    const chunks = extractContextChunks(targetElement, containerElement);
+    setContextChunks(chunks);
+  }, [targetElement, containerElement, setContextChunks]);
+  useEffect(() => {
+    if (!mergedConfig.showSuggestions) return;
+    if (!contextString) return;
+    if (suggestedPrompts.length > 0) return;
+    let cancelled = false;
+    const fetchSuggestions = async () => {
+      setIsLoadingSuggestions(true);
+      try {
+        const response = await fetch(mergedConfig.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "suggest",
+            context: contextString,
+            model: mergedConfig.prePassModel
+          })
+        });
+        if (await handleRateLimitResponse(response, mergedConfig.endpoint)) {
+          return;
+        }
+        if (response.ok) {
+          const data = await response.json().catch(() => null);
+          if (data?.suggestions && Array.isArray(data.suggestions)) {
+            if (!cancelled) {
+              setSuggestedPrompts(
+                data.suggestions.map((text, i) => ({
+                  id: `suggestion-${i}`,
+                  text
+                }))
+              );
+              setIsLoadingSuggestions(false);
+            }
+            return;
+          }
+        }
+      } catch (err) {
+        console.error("[useQuickChat] Failed to fetch suggestions:", err);
+      }
+      if (!cancelled) {
+        setSuggestedPrompts([
+          { id: "s1", text: "What is this element?" },
+          { id: "s2", text: "How can I style this?" },
+          { id: "s3", text: "Is this accessible?" }
+        ]);
+        setIsLoadingSuggestions(false);
+      }
+    };
+    void fetchSuggestions();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    contextString,
+    handleRateLimitResponse,
+    mergedConfig.endpoint,
+    mergedConfig.prePassModel,
+    mergedConfig.showSuggestions,
+    setIsLoadingSuggestions,
+    setSuggestedPrompts,
+    suggestedPrompts.length
+  ]);
+  const selectSuggestion = useCallback(
+    (prompt) => {
+      setInput(prompt.text);
+    },
+    [setInput]
+  );
+  const sendMessage = useCallback(
+    async (messageText) => {
+      const text = (messageText || input).trim();
+      if (!text) return;
+      setInput("");
+      setError(null);
+      setManualSending(true);
+      setStoreIsSending(true);
+      setStoreIsStreaming(true);
+      setDebugInfo(null);
+      try {
+        addMessage({
+          role: "user",
+          content: text
+        });
+        await aiSendMessage({ text });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setError(msg);
+      } finally {
+        setManualSending(false);
+        setStoreIsSending(false);
+        setStoreIsStreaming(false);
+      }
+    },
+    [
+      addMessage,
+      aiSendMessage,
+      input,
+      setError,
+      setInput,
+      setStoreIsSending,
+      setStoreIsStreaming
+    ]
+  );
+  const clearMessages = useCallback(() => {
+    stop();
+    storeClearMessages();
+    setAiMessages([]);
+    const endpoint = `${mergedConfig.endpoint}/history`;
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "clear" })
+    }).then((res) => handleRateLimitResponse(res, endpoint)).catch(
+      (err) => console.error("[useQuickChat] Failed to clear backend history:", err)
+    );
+  }, [
+    handleRateLimitResponse,
+    mergedConfig.endpoint,
+    setAiMessages,
+    stop,
+    storeClearMessages
+  ]);
+  useEffect(() => {
+    return () => {
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+    };
+  }, []);
+  return {
+    input,
+    messages,
+    isLoadingSuggestions,
+    isSending,
+    isStreaming,
+    suggestedPrompts,
+    contextChunks,
+    error,
+    debugInfo,
+    rateLimitNotice,
+    isPinned,
+    lastSyncedAt,
+    config: mergedConfig,
+    setInput,
+    toggleChunk,
+    toggleAllChunks,
+    selectSuggestion,
+    sendMessage,
+    clearMessages,
+    setIsPinned,
+    clearRateLimitNotice: () => setRateLimitNotice(null)
+  };
+}
+
+// src/QuickChat/QuickChat.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = quickChatKeyframes;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+var LoadingDots = React.memo(function LoadingDots2() {
+  return /* @__PURE__ */ jsx("div", { style: quickChatStyles.loadingDots, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...quickChatStyles.loadingDot,
+        animationDelay: `${i * 0.16}s`
+      }
+    },
+    i
+  )) });
+});
+function QuickChat({
+  visible,
+  targetElement,
+  containerElement,
+  onClose,
+  onPin,
+  isPinned: isPinnedProp = false,
+  config,
+  style,
+  className,
+  initialInput,
+  onInitialInputConsumed
+}) {
+  const inputRef = useRef2(null);
+  const messagesEndRef = useRef2(null);
+  const [inputFocused, setInputFocused] = useState2(false);
+  const [showContext, setShowContext] = useState2(false);
+  const [hoveredSuggestion, setHoveredSuggestion] = useState2(
+    null
+  );
+  const {
+    input,
+    messages,
+    isLoadingSuggestions,
+    isSending,
+    isStreaming,
+    debugInfo,
+    rateLimitNotice,
+    suggestedPrompts,
+    contextChunks,
+    error,
+    isPinned: storePinned,
+    setInput,
+    toggleChunk,
+    toggleAllChunks,
+    selectSuggestion,
+    sendMessage,
+    clearMessages,
+    setIsPinned,
+    clearRateLimitNotice,
+    config: mergedConfig
+  } = useQuickChat(targetElement, containerElement, config);
+  const isPinned = isPinnedProp || storePinned;
+  const handlePinToggle = useCallback2(() => {
+    const newPinned = !isPinned;
+    setIsPinned(newPinned);
+    onPin?.(newPinned);
+  }, [isPinned, setIsPinned, onPin]);
+  const handleClose = useCallback2(() => {
+    if (isPinned) {
+      setIsPinned(false);
+      onPin?.(false);
+    }
+    onClose();
+  }, [isPinned, setIsPinned, onPin, onClose]);
+  useEffect2(() => {
+    injectStyles();
+  }, []);
+  useEffect2(() => {
+    if (visible && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [visible]);
+  useEffect2(() => {
+    if (initialInput && visible) {
+      setInput(initialInput);
+      onInitialInputConsumed?.();
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.setSelectionRange(
+          initialInput.length,
+          initialInput.length
+        );
+      }
+    }
+  }, [initialInput, visible, setInput, onInitialInputConsumed]);
+  useEffect2(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages]);
+  const handleInputChange = useCallback2(
+    (e) => {
+      setInput(e.target.value);
+      const target = e.target;
+      target.style.height = "auto";
+      target.style.height = `${Math.min(target.scrollHeight, 80)}px`;
+    },
+    [setInput]
+  );
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      } else if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [sendMessage, onClose]
+  );
+  const handleSend = useCallback2(() => {
+    sendMessage();
+  }, [sendMessage]);
+  const handleSendToT3Chat = useCallback2(() => {
+    if (typeof window === "undefined") return;
+    const query = input.trim();
+    const baseUrl = mergedConfig.t3chat?.baseUrl ?? "https://t3.chat";
+    const url = query ? `${baseUrl}/?q=${encodeURIComponent(query)}` : baseUrl;
+    window.open(url, "_blank", "noopener,noreferrer");
+  }, [input, mergedConfig.t3chat?.baseUrl]);
+  const handleCopy = useCallback2((text) => {
+    navigator.clipboard.writeText(text);
+  }, []);
+  const includedCount = useMemo2(
+    () => contextChunks.filter((c) => c.included).length,
+    [contextChunks]
+  );
+  const [rateLimitExpanded, setRateLimitExpanded] = useState2(false);
+  const [reportStatus, setReportStatus] = useState2("idle");
+  const [reportUrl, setReportUrl] = useState2(null);
+  const [reportError, setReportError] = useState2(null);
+  useEffect2(() => {
+    if (rateLimitNotice) {
+      setReportStatus("idle");
+      setReportUrl(null);
+      setReportError(null);
+      setRateLimitExpanded(false);
+    }
+  }, [rateLimitNotice]);
+  const handleReportIssue = useCallback2(async () => {
+    if (!rateLimitNotice) return;
+    if (!targetElement) {
+      setReportStatus("error");
+      setReportError("No target element available to report.");
+      return;
+    }
+    setReportStatus("sending");
+    setReportError(null);
+    try {
+      const payload = buildAnyclickPayload(targetElement, "issue", {
+        comment: `QuickChat: ${rateLimitNotice.message}`,
+        metadata: {
+          source: "quickchat",
+          kind: "rate_limit",
+          endpoint: rateLimitNotice.endpoint ?? mergedConfig.endpoint,
+          retryAt: rateLimitNotice.retryAt,
+          retryAfterSeconds: rateLimitNotice.retryAfterSeconds,
+          requestId: rateLimitNotice.requestId,
+          debugInfo: debugInfo ?? void 0,
+          raw: rateLimitNotice.raw ?? void 0
+        }
+      });
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const json = await res.json().catch(() => null);
+      if (!res.ok || !json?.success) {
+        const msg = json?.error || (res.status ? `Failed to create issue (${res.status}).` : "Failed to create issue.");
+        throw new Error(msg);
+      }
+      const firstUrl = json.results?.find(
+        (r) => typeof r.url === "string"
+      )?.url;
+      setReportUrl(firstUrl ?? null);
+      setReportStatus("sent");
+    } catch (e) {
+      setReportStatus("error");
+      setReportError(e instanceof Error ? e.message : String(e));
+    }
+  }, [rateLimitNotice, targetElement, mergedConfig.endpoint, debugInfo]);
+  if (!visible) return null;
+  const containerStyles = isPinned ? {
+    ...quickChatStyles.pinnedContainer,
+    animation: "slideInFromRight 0.25s ease-out",
+    ...style
+  } : {
+    ...quickChatStyles.container,
+    animation: "fadeIn 0.15s ease-out",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: containerStyles, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...quickChatStyles.header,
+          padding: isPinned ? "12px 12px 8px 12px" : "6px 8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+            !isPinned && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: {
+                  ...quickChatStyles.iconButton,
+                  marginLeft: "-4px"
+                },
+                title: "Back to menu",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+              }
+            ),
+            mergedConfig.showRedactionUI && contextChunks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowContext(!showContext),
+                  style: {
+                    ...quickChatStyles.contextBadge,
+                    ...showContext ? quickChatStyles.contextBadgeActive : {}
+                  },
+                  title: "Edit context",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      includedCount,
+                      "/",
+                      contextChunks.length
+                    ] }),
+                    showContext ? /* @__PURE__ */ jsx(ChevronUp, { size: 10 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 10 })
+                  ]
+                }
+              ),
+              showContext && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "2px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleAllChunks(true),
+                    style: quickChatStyles.contextToggleSmall,
+                    title: "Include all",
+                    children: "All"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleAllChunks(false),
+                    style: quickChatStyles.contextToggleSmall,
+                    title: "Exclude all",
+                    children: "None"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: quickChatStyles.headerActions, children: [
+            messages.length > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: clearMessages,
+                style: quickChatStyles.iconButton,
+                title: "Clear chat",
+                children: /* @__PURE__ */ jsx(RefreshCw, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handlePinToggle,
+                style: {
+                  ...quickChatStyles.iconButton,
+                  ...isPinned ? quickChatStyles.iconButtonActive : {}
+                },
+                title: isPinned ? "Unpin (closes with menu)" : "Pin (stays open)",
+                children: isPinned ? /* @__PURE__ */ jsx(PinOff, { size: 14 }) : /* @__PURE__ */ jsx(Pin, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClose,
+                style: quickChatStyles.iconButton,
+                title: "Close",
+                children: /* @__PURE__ */ jsx(X, { size: 14 })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showContext && contextChunks.length > 0 && /* @__PURE__ */ jsx("div", { style: quickChatStyles.contextDropdown, children: contextChunks.map((chunk) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: {
+          ...quickChatStyles.contextChunkCompact,
+          ...chunk.included ? {} : quickChatStyles.contextChunkExcluded
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: chunk.included,
+              onChange: () => toggleChunk(chunk.id),
+              style: quickChatStyles.contextCheckbox
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: quickChatStyles.contextLabel, children: chunk.label })
+        ]
+      },
+      chunk.id
+    )) }),
+    mergedConfig.showSuggestions && messages.length === 0 && suggestedPrompts.length > 0 && /* @__PURE__ */ jsx("div", { style: quickChatStyles.suggestionsContainer, children: isLoadingSuggestions ? /* @__PURE__ */ jsx(LoadingDots, {}) : suggestedPrompts.map((prompt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => selectSuggestion(prompt),
+        onMouseEnter: () => setHoveredSuggestion(prompt.id),
+        onMouseLeave: () => setHoveredSuggestion(null),
+        style: {
+          ...quickChatStyles.suggestionChip,
+          ...hoveredSuggestion === prompt.id ? quickChatStyles.suggestionChipHover : {}
+        },
+        children: prompt.text
+      },
+      prompt.id
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: isPinned ? quickChatStyles.pinnedMessagesArea : quickChatStyles.messagesArea,
+        children: [
+          error && !rateLimitNotice && /* @__PURE__ */ jsxs("div", { style: quickChatStyles.errorContainer, children: [
+            /* @__PURE__ */ jsx(AlertCircle, { size: 20, style: quickChatStyles.errorIcon }),
+            /* @__PURE__ */ jsx("span", { style: quickChatStyles.errorText, children: error }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => sendMessage(),
+                style: quickChatStyles.errorRetry,
+                children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { size: 10 }),
+                  "Retry"
+                ]
+              }
+            )
+          ] }),
+          debugInfo && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                backgroundColor: "#0f172a",
+                color: "#e2e8f0",
+                border: "1px solid #334155",
+                borderRadius: "8px",
+                padding: "8px",
+                margin: "0 0 8px",
+                fontSize: "12px",
+                lineHeight: 1.4,
+                wordBreak: "break-word"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      gap: "8px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Last request: ",
+                        debugInfo.status,
+                        " ",
+                        debugInfo.ok ? "(ok)" : "(error)"
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { opacity: 0.7 }, children: new Date(debugInfo.timestamp).toLocaleTimeString() })
+                    ]
+                  }
+                ),
+                debugInfo.error && /* @__PURE__ */ jsxs("div", { style: { color: "#f87171", marginTop: "4px" }, children: [
+                  "Error: ",
+                  debugInfo.error
+                ] }),
+                debugInfo.contentPreview && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+                  "Content: ",
+                  debugInfo.contentPreview
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px", opacity: 0.8 }, children: [
+                  "Raw: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          ),
+          messages.length > 0 && messages.map((message) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                ...quickChatStyles.message,
+                animation: "fadeIn 0.2s ease-out"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: message.role === "user" ? quickChatStyles.messageUser : quickChatStyles.messageAssistant,
+                    children: [
+                      message.content,
+                      message.isStreaming && /* @__PURE__ */ jsx("span", { style: quickChatStyles.streamingIndicator }),
+                      message.role === "assistant" && !message.isStreaming && message.content.endsWith("...") && /* @__PURE__ */ jsx("span", { style: quickChatStyles.truncated, children: "(truncated)" })
+                    ]
+                  }
+                ),
+                message.role === "assistant" && !message.isStreaming && message.content && /* @__PURE__ */ jsxs("div", { style: quickChatStyles.messageActions, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleCopy(message.content),
+                      style: quickChatStyles.actionButton,
+                      children: [
+                        /* @__PURE__ */ jsx(Copy, { size: 10 }),
+                        "Copy"
+                      ]
+                    }
+                  ),
+                  message.actions?.map((action) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: action.onClick,
+                      style: quickChatStyles.actionButton,
+                      children: [
+                        action.icon,
+                        action.label
+                      ]
+                    },
+                    action.id
+                  ))
+                ] })
+              ]
+            },
+            message.id
+          )),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ]
+      }
+    ),
+    rateLimitNotice && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(148, 163, 184, 0.25)",
+          background: "linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96))",
+          color: "#e2e8f0",
+          padding: "8px 10px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(AlertCircle, { size: 16, style: { color: "#fbbf24" } }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", lineHeight: 1.2 }, children: rateLimitNotice.message })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setRateLimitExpanded((v) => !v),
+                      style: {
+                        border: "1px solid rgba(148, 163, 184, 0.25)",
+                        background: "rgba(30, 41, 59, 0.6)",
+                        color: "#e2e8f0",
+                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        fontSize: "12px",
+                        cursor: "pointer"
+                      },
+                      children: rateLimitExpanded ? "Hide" : "Details"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleReportIssue,
+                      disabled: reportStatus === "sending" || reportStatus === "sent",
+                      style: {
+                        border: "1px solid rgba(148, 163, 184, 0.25)",
+                        background: reportStatus === "sent" ? "rgba(34, 197, 94, 0.22)" : "rgba(30, 41, 59, 0.6)",
+                        color: "#e2e8f0",
+                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        fontSize: "12px",
+                        cursor: reportStatus === "sending" || reportStatus === "sent" ? "not-allowed" : "pointer",
+                        opacity: reportStatus === "sending" ? 0.7 : 1
+                      },
+                      title: "Create a GitHub issue via /api/feedback",
+                      children: reportStatus === "sending" ? "Reporting..." : reportStatus === "sent" ? "Reported" : "Report"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        clearRateLimitNotice();
+                        setRateLimitExpanded(false);
+                      },
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "rgba(226, 232, 240, 0.8)",
+                        padding: "4px",
+                        cursor: "pointer"
+                      },
+                      title: "Dismiss",
+                      children: /* @__PURE__ */ jsx(X, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          reportUrl && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", fontSize: "12px" }, children: [
+            "Created:",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: reportUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "#93c5fd" },
+                children: "Open issue"
+              }
+            )
+          ] }),
+          reportError && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { marginTop: "6px", fontSize: "12px", color: "#fca5a5" },
+              children: reportError
+            }
+          ),
+          rateLimitExpanded && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginTop: "8px",
+                fontSize: "12px",
+                lineHeight: 1.4,
+                backgroundColor: "rgba(2, 6, 23, 0.55)",
+                border: "1px solid rgba(148, 163, 184, 0.25)",
+                borderRadius: "8px",
+                padding: "8px",
+                wordBreak: "break-word"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { opacity: 0.85 }, children: [
+                  "Status: ",
+                  rateLimitNotice.status,
+                  rateLimitNotice.requestId ? ` \u2022 Request: ${rateLimitNotice.requestId}` : ""
+                ] }),
+                rateLimitNotice.endpoint && /* @__PURE__ */ jsxs("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "Endpoint: ",
+                  rateLimitNotice.endpoint
+                ] }),
+                rateLimitNotice.retryAt && /* @__PURE__ */ jsxs("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "RetryAt: ",
+                  new Date(rateLimitNotice.retryAt).toLocaleString()
+                ] }),
+                rateLimitNotice.raw && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Raw: ",
+                  rateLimitNotice.raw
+                ] }),
+                debugInfo && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Debug: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: quickChatStyles.inputContainer, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: inputRef,
+          value: input,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setInputFocused(true),
+          onBlur: () => setInputFocused(false),
+          placeholder: mergedConfig.placeholder,
+          disabled: isSending,
+          rows: 1,
+          style: {
+            ...quickChatStyles.input,
+            ...inputFocused ? quickChatStyles.inputFocused : {}
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
+        mergedConfig.t3chat?.enabled !== false && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSendToT3Chat,
+            disabled: !input.trim(),
+            title: mergedConfig.t3chat?.label ?? "Ask t3.chat",
+            style: {
+              ...quickChatStyles.sendButton,
+              backgroundColor: "#7c3aed",
+              ...!input.trim() ? quickChatStyles.sendButtonDisabled : {}
+            },
+            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSend,
+            disabled: isSending || !input.trim(),
+            style: {
+              ...quickChatStyles.sendButton,
+              ...isSending || !input.trim() ? quickChatStyles.sendButtonDisabled : {}
+            },
+            children: isSending ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "14px",
+                  height: "14px",
+                  border: "2px solid transparent",
+                  borderTopColor: "#fff",
+                  borderRadius: "50%",
+                  animation: "spin 0.8s linear infinite"
+                }
+              }
+            ) : /* @__PURE__ */ jsx(Send, { size: 14 })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
 // src/ScreenshotPreview.tsx
-import React, { useMemo, useState } from "react";
+import React2, { useMemo as useMemo3, useState as useState3 } from "react";
 import { estimateTotalSize, formatBytes } from "@ewjdev/anyclick-core";
 import {
   AlertCircleIcon,
@@ -516,8 +2389,8 @@ var screenshotPreviewStyles = {
 };
 
 // src/ScreenshotPreview.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ScreenshotPreview = React.memo(function ScreenshotPreview2({
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ScreenshotPreview = React2.memo(function ScreenshotPreview2({
   isLoading,
   isSubmitting,
   onCancel,
@@ -525,12 +2398,12 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
   onRetake,
   screenshots
 }) {
-  const [activeTab, setActiveTab] = useState("element");
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState3("element");
+  const [isExpanded, setIsExpanded] = useState3(false);
   const getError = (key) => {
     return screenshots?.errors?.[key];
   };
-  const tabs = useMemo(() => {
+  const tabs = useMemo3(() => {
     if (!screenshots) return [];
     const allTabs = [
       {
@@ -554,29 +2427,29 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
     ];
     return allTabs.filter((tab) => tab.data || tab.error);
   }, [screenshots]);
-  const totalSize = useMemo(
+  const totalSize = useMemo3(
     () => screenshots ? estimateTotalSize(screenshots) : 0,
     [screenshots]
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.loadingContainer, children: [
-      /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.loadingContainer, children: [
+      /* @__PURE__ */ jsx2(
         Loader2Icon,
         {
           className: "w-6 h-6 animate-spin",
           style: { color: "#3b82f6" }
         }
       ),
-      /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.loadingText, children: "Capturing screenshots..." })
+      /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.loadingText, children: "Capturing screenshots..." })
     ] }) });
   }
   if (!screenshots) {
-    return /* @__PURE__ */ jsx("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.emptyContainer, children: [
-      /* @__PURE__ */ jsx(ImageIcon, { className: "w-8 h-8", style: { color: "#9ca3af" } }),
-      /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.emptyText, children: "Screenshots unavailable" }),
-      /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.emptySubtext, children: "Some elements can't be captured (e.g., gradient text)" }),
-      /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.emptyActions, children: [
-        /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx2("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.emptyContainer, children: [
+      /* @__PURE__ */ jsx2(ImageIcon, { className: "w-8 h-8", style: { color: "#9ca3af" } }),
+      /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.emptyText, children: "Screenshots unavailable" }),
+      /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.emptySubtext, children: "Some elements can't be captured (e.g., gradient text)" }),
+      /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.emptyActions, children: [
+        /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -584,12 +2457,12 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
             onClick: onRetake,
             style: screenshotPreviewStyles.retakeButtonOutline,
             children: [
-              /* @__PURE__ */ jsx(RefreshCwIcon, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx2(RefreshCwIcon, { className: "w-4 h-4" }),
               "Try Again"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -597,7 +2470,7 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
             onClick: () => onConfirm({ capturedAt: (/* @__PURE__ */ new Date()).toISOString() }),
             style: screenshotPreviewStyles.continueButton,
             children: [
-              /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx2(CheckIcon, { className: "w-4 h-4" }),
               "Continue Without"
             ]
           }
@@ -607,7 +2480,7 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
   }
   const activeScreenshot = activeTab === "element" ? screenshots.element : activeTab === "container" ? screenshots.container : screenshots.viewport;
   const activeError = getError(activeTab);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -616,23 +2489,23 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
         padding: "8px"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.header, children: [
-          /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.headerTitle, children: "Review Screenshots" }),
-          /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.headerActions, children: [
-            /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.sizeLabel, children: formatBytes(totalSize) }),
-            /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.header, children: [
+          /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.headerTitle, children: "Review Screenshots" }),
+          /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.headerActions, children: [
+            /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.sizeLabel, children: formatBytes(totalSize) }),
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
                 onClick: () => setIsExpanded(!isExpanded),
                 style: screenshotPreviewStyles.iconButton,
                 title: isExpanded ? "Collapse" : "Expand",
-                children: isExpanded ? /* @__PURE__ */ jsx(ShrinkIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ExpandIcon, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ jsx2(ShrinkIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx2(ExpandIcon, { className: "w-4 h-4" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: screenshotPreviewStyles.tabContainer, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx2("div", { style: screenshotPreviewStyles.tabContainer, children: tabs.map((tab) => /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -643,7 +2516,7 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
               ...tab.error && !tab.data ? screenshotPreviewStyles.tabError : {}
             },
             children: [
-              tab.error && !tab.data && /* @__PURE__ */ jsx(
+              tab.error && !tab.data && /* @__PURE__ */ jsx2(
                 AlertCircleIcon,
                 {
                   className: "w-3 h-3",
@@ -651,32 +2524,32 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
                 }
               ),
               tab.label,
-              tab.data && /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.tabSize, children: formatBytes(tab.data.sizeBytes) })
+              tab.data && /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.tabSize, children: formatBytes(tab.data.sizeBytes) })
             ]
           },
           tab.key
         )) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             style: {
               ...screenshotPreviewStyles.previewContainer,
               ...isExpanded ? screenshotPreviewStyles.previewContainerExpanded : {}
             },
-            children: activeScreenshot ? /* @__PURE__ */ jsx(
+            children: activeScreenshot ? /* @__PURE__ */ jsx2(
               "img",
               {
                 alt: `${activeTab} screenshot`,
                 src: activeScreenshot.dataUrl,
                 style: screenshotPreviewStyles.previewImage
               }
-            ) : activeError ? /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.errorPreview, children: [
-              /* @__PURE__ */ jsx(AlertCircleIcon, { className: "w-8 h-8", style: { color: "#ef4444" } }),
-              /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.errorTitle, children: "Capture Failed" }),
-              /* @__PURE__ */ jsx("span", { style: screenshotPreviewStyles.errorMessage, children: activeError.message })
-            ] }) : /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.noPreview, children: [
-              /* @__PURE__ */ jsx(ImageIcon, { className: "w-6 h-6", style: { color: "#9ca3af" } }),
-              /* @__PURE__ */ jsxs("span", { children: [
+            ) : activeError ? /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.errorPreview, children: [
+              /* @__PURE__ */ jsx2(AlertCircleIcon, { className: "w-8 h-8", style: { color: "#ef4444" } }),
+              /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.errorTitle, children: "Capture Failed" }),
+              /* @__PURE__ */ jsx2("span", { style: screenshotPreviewStyles.errorMessage, children: activeError.message })
+            ] }) : /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.noPreview, children: [
+              /* @__PURE__ */ jsx2(ImageIcon, { className: "w-6 h-6", style: { color: "#9ca3af" } }),
+              /* @__PURE__ */ jsxs2("span", { children: [
                 "No ",
                 activeTab,
                 " screenshot"
@@ -684,14 +2557,14 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
             ] })
           }
         ),
-        activeScreenshot && /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.dimensionsInfo, children: [
+        activeScreenshot && /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.dimensionsInfo, children: [
           activeScreenshot.width,
           " \xD7 ",
           activeScreenshot.height,
           "px"
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.actions, children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.actions, children: [
+          /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
@@ -699,13 +2572,13 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
               onClick: onRetake,
               style: screenshotPreviewStyles.retakeButtonSmall,
               children: [
-                /* @__PURE__ */ jsx(RefreshCwIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsx2(RefreshCwIcon, { className: "w-3 h-3" }),
                 "Retake"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: screenshotPreviewStyles.actionsRight, children: [
-            /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2("div", { style: screenshotPreviewStyles.actionsRight, children: [
+            /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
@@ -714,12 +2587,12 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
                 onClick: onCancel,
                 style: { ...menuStyles.button, ...menuStyles.cancelButton },
                 children: [
-                  /* @__PURE__ */ jsx(XIcon, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ jsx2(XIcon, { className: "w-3 h-3" }),
                   "Cancel"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -730,11 +2603,11 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
                   ...menuStyles.submitButton,
                   ...isSubmitting ? menuStyles.submitButtonDisabled : {}
                 },
-                children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2Icon, { className: "w-3 h-3 animate-spin" }),
+                children: isSubmitting ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  /* @__PURE__ */ jsx2(Loader2Icon, { className: "w-3 h-3 animate-spin" }),
                   "Sending..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CheckIcon, { className: "w-3 h-3" }),
+                ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  /* @__PURE__ */ jsx2(CheckIcon, { className: "w-3 h-3" }),
                   "Send"
                 ] })
               }
@@ -831,7 +2704,7 @@ svg.${HIGHLIGHT_CONTAINER_CLASS},
 }
 `;
 }
-function injectStyles(colors) {
+function injectStyles2(colors) {
   if (typeof document === "undefined") return;
   const existingStyle = document.getElementById(STYLE_ID);
   if (existingStyle) {
@@ -879,12 +2752,12 @@ function findContainerParent(element, config) {
 }
 function highlightTarget(element, colors) {
   const mergedColors = { ...defaultHighlightColors, ...colors };
-  injectStyles(mergedColors);
+  injectStyles2(mergedColors);
   element.classList.add(HIGHLIGHT_TARGET_CLASS);
 }
 function highlightContainer(element, colors) {
   const mergedColors = { ...defaultHighlightColors, ...colors };
-  injectStyles(mergedColors);
+  injectStyles2(mergedColors);
   element.classList.add(HIGHLIGHT_CONTAINER_CLASS);
 }
 function clearHighlights() {
@@ -911,12 +2784,12 @@ function applyHighlights(targetElement, config) {
 }
 
 // src/ContextMenu.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var VIEWPORT_PADDING = 10;
 var defaultIcons = {
-  feature: /* @__PURE__ */ jsx2(PlusIcon, { className: "w-4 h-4" }),
-  issue: /* @__PURE__ */ jsx2(FlagIcon, { className: "w-4 h-4" }),
-  like: /* @__PURE__ */ jsx2(ThumbsUpIcon, { className: "w-4 h-4" })
+  feature: /* @__PURE__ */ jsx3(PlusIcon, { className: "w-4 h-4" }),
+  issue: /* @__PURE__ */ jsx3(FlagIcon, { className: "w-4 h-4" }),
+  like: /* @__PURE__ */ jsx3(ThumbsUpIcon, { className: "w-4 h-4" })
 };
 var OFFSCREEN_POSITION = { x: -9999, y: -9999 };
 var DefaultHeader = ({
@@ -925,25 +2798,25 @@ var DefaultHeader = ({
   styles,
   title = "Send Feedback"
 }) => {
-  return /* @__PURE__ */ jsxs2("div", { style: styles, className, children: [
-    /* @__PURE__ */ jsx2("span", { children: title }),
+  return /* @__PURE__ */ jsxs3("div", { style: styles, className, children: [
+    /* @__PURE__ */ jsx3("span", { children: title }),
     children
   ] });
 };
-var MenuItem = React2.memo(function MenuItem2({
+var MenuItem = React3.memo(function MenuItem2({
   disabled,
   hasChildren,
   item,
   onClick
 }) {
-  const [isHovered, setIsHovered] = useState2(false);
-  const [isPressed, setIsPressed] = useState2(false);
+  const [isHovered, setIsHovered] = useState4(false);
+  const [isPressed, setIsPressed] = useState4(false);
   const isComingSoon = item.status === "comingSoon";
   const badgeLabel = item.badge?.label ?? (isComingSoon ? "Coming soon" : null);
   const badgeTone = item.badge?.tone ?? (isComingSoon ? "neutral" : "neutral");
   const badgeStyle = badgeLabel ? getBadgeStyle(badgeTone) : void 0;
   const iconNode = item.icon ?? defaultIcons[item.type];
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -964,22 +2837,22 @@ var MenuItem = React2.memo(function MenuItem2({
         ...disabled ? menuStyles.itemDisabled : {}
       },
       children: [
-        iconNode ? /* @__PURE__ */ jsx2("span", { style: menuStyles.itemIcon, children: iconNode }) : null,
-        /* @__PURE__ */ jsxs2("span", { style: menuStyles.itemLabel, children: [
+        iconNode ? /* @__PURE__ */ jsx3("span", { style: menuStyles.itemIcon, children: iconNode }) : null,
+        /* @__PURE__ */ jsxs3("span", { style: menuStyles.itemLabel, children: [
           item.label,
-          badgeLabel && /* @__PURE__ */ jsx2("span", { style: badgeStyle, children: badgeLabel })
+          badgeLabel && /* @__PURE__ */ jsx3("span", { style: badgeStyle, children: badgeLabel })
         ] }),
-        hasChildren && /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "w-4 h-4", style: menuStyles.submenuIcon })
+        hasChildren && /* @__PURE__ */ jsx3(ChevronRightIcon, { className: "w-4 h-4", style: menuStyles.submenuIcon })
       ]
     }
   );
 });
-var BackButton = React2.memo(function BackButton2({
+var BackButton = React3.memo(function BackButton2({
   onClick
 }) {
-  const [isHovered, setIsHovered] = useState2(false);
-  const [isPressed, setIsPressed] = useState2(false);
-  return /* @__PURE__ */ jsxs2(
+  const [isHovered, setIsHovered] = useState4(false);
+  const [isPressed, setIsPressed] = useState4(false);
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -999,26 +2872,26 @@ var BackButton = React2.memo(function BackButton2({
         ...isHovered || isPressed ? menuStyles.itemHover : {}
       },
       children: [
-        /* @__PURE__ */ jsx2(ChevronLeftIcon, { className: "w-4 h-4", style: { opacity: 0.5 } }),
-        /* @__PURE__ */ jsx2("span", { style: { opacity: 0.7 }, children: "Back" })
+        /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "w-4 h-4", style: { opacity: 0.5 } }),
+        /* @__PURE__ */ jsx3("span", { style: { opacity: 0.7 }, children: "Back" })
       ]
     }
   );
 });
-var CommentForm = React2.memo(function CommentForm2({
+var CommentForm = React3.memo(function CommentForm2({
   isSubmitting,
   onCancel,
   onSubmit
 }) {
-  const [comment, setComment] = useState2("");
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [comment, setComment] = useState4("");
+  const inputRef = useRef3(null);
+  useEffect3(() => {
     inputRef.current?.focus();
   }, []);
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = useCallback3(() => {
     onSubmit(comment);
   }, [comment, onSubmit]);
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
         handleSubmit();
@@ -1028,8 +2901,8 @@ var CommentForm = React2.memo(function CommentForm2({
     },
     [handleSubmit, onCancel]
   );
-  return /* @__PURE__ */ jsxs2("div", { style: menuStyles.commentSection, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { style: menuStyles.commentSection, children: [
+    /* @__PURE__ */ jsx3(
       "textarea",
       {
         ref: inputRef,
@@ -1041,8 +2914,8 @@ var CommentForm = React2.memo(function CommentForm2({
         value: comment
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { style: menuStyles.buttonRow, children: [
-      /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs3("div", { style: menuStyles.buttonRow, children: [
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -1052,7 +2925,7 @@ var CommentForm = React2.memo(function CommentForm2({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -1100,26 +2973,35 @@ function ContextMenu({
   onSelect,
   position,
   positionMode = "inView",
+  quickChatConfig,
   screenshotConfig,
   style,
   targetElement,
   visible
 }) {
-  const [selectedType, setSelectedType] = useState2(null);
-  const [currentView, setCurrentView] = useState2("menu");
-  const [pendingComment, setPendingComment] = useState2();
-  const [submenuStack, setSubmenuStack] = useState2([]);
-  const [screenshots, setScreenshots] = useState2(null);
-  const [isCapturing, setIsCapturing] = useState2(false);
-  const menuRef = useRef(null);
-  const [adjustedPosition, setAdjustedPosition] = useState2(OFFSCREEN_POSITION);
-  const [isDragging, setIsDragging] = useState2(false);
-  const [dragOffset, setDragOffset] = useState2({
+  const [selectedType, setSelectedType] = useState4(null);
+  const [currentView, setCurrentView] = useState4("menu");
+  const [pendingComment, setPendingComment] = useState4();
+  const [submenuStack, setSubmenuStack] = useState4([]);
+  const [screenshots, setScreenshots] = useState4(null);
+  const [isCapturing, setIsCapturing] = useState4(false);
+  const [isQuickChatPinned, setIsQuickChatPinned] = useState4(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return sessionStorage.getItem("anyclick-quick-chat-pinned") === "true";
+    } catch {
+      return false;
+    }
+  });
+  const menuRef = useRef3(null);
+  const [adjustedPosition, setAdjustedPosition] = useState4(OFFSCREEN_POSITION);
+  const [isDragging, setIsDragging] = useState4(false);
+  const [dragOffset, setDragOffset] = useState4({
     x: 0,
     y: 0
   });
-  const dragStartRef = useRef(null);
-  const mergedScreenshotConfig = React2.useMemo(
+  const dragStartRef = useRef3(null);
+  const mergedScreenshotConfig = React3.useMemo(
     () => ({
       ...DEFAULT_SCREENSHOT_CONFIG,
       ...screenshotConfig
@@ -1128,7 +3010,7 @@ function ContextMenu({
   );
   const showPreview = mergedScreenshotConfig.showPreview && isScreenshotSupported();
   const currentItems = submenuStack.length > 0 ? submenuStack[submenuStack.length - 1] : items;
-  const captureScreenshots = useCallback(async () => {
+  const captureScreenshots = useCallback3(async () => {
     if (!targetElement || !showPreview) return;
     setIsCapturing(true);
     try {
@@ -1145,7 +3027,7 @@ function ContextMenu({
       setIsCapturing(false);
     }
   }, [containerElement, mergedScreenshotConfig, showPreview, targetElement]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible) {
       setSelectedType(null);
       setCurrentView("menu");
@@ -1159,7 +3041,7 @@ function ContextMenu({
       dragStartRef.current = null;
     }
   }, [visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (visible && targetElement) {
       clearHighlights();
       applyHighlights(targetElement, highlightConfig);
@@ -1170,7 +3052,7 @@ function ContextMenu({
       clearHighlights();
     };
   }, [highlightConfig, targetElement, visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible) {
       return;
     }
@@ -1189,13 +3071,13 @@ function ContextMenu({
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [onClose, visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (visible) {
       setAdjustedPosition(position);
       setDragOffset({ x: 0, y: 0 });
     }
   }, [position.x, position.y, visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible || !menuRef.current) return;
     const updatePosition = () => {
       const menuElement = menuRef.current;
@@ -1219,7 +3101,7 @@ function ContextMenu({
     window.addEventListener("resize", updatePosition);
     return () => window.removeEventListener("resize", updatePosition);
   }, [currentView, dragOffset, position, positionMode, visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible || positionMode !== "dynamic") return;
     const handlePointerMove = (event) => {
       if (!isDragging || !dragStartRef.current) return;
@@ -1246,7 +3128,7 @@ function ContextMenu({
       };
     }
   }, [isDragging, positionMode, visible]);
-  const handleDragStart = useCallback(
+  const handleDragStart = useCallback3(
     (event) => {
       if (positionMode !== "dynamic") return;
       event.preventDefault();
@@ -1255,7 +3137,8 @@ function ContextMenu({
     },
     [positionMode]
   );
-  useEffect(() => {
+  const [initialChatInput, setInitialChatInput] = useState4("");
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         if (currentView === "screenshot-preview") {
@@ -1264,19 +3147,38 @@ function ContextMenu({
           setCurrentView("menu");
           setSelectedType(null);
           setPendingComment(void 0);
+        } else if (currentView === "quick-chat") {
+          if (!isQuickChatPinned) {
+            setCurrentView("menu");
+          }
         } else if (submenuStack.length > 0) {
           setSubmenuStack((prev) => prev.slice(0, -1));
         } else {
           onClose();
         }
+        return;
+      }
+      if (quickChatConfig && currentView === "menu" && !isQuickChatPinned && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        if (e.key.length === 1 && e.key.match(/[a-zA-Z0-9\s.,!?'"]/)) {
+          e.preventDefault();
+          setInitialChatInput(e.key);
+          setCurrentView("quick-chat");
+        }
       }
     };
     if (visible) {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
-  }, [currentView, onClose, submenuStack.length, visible]);
-  useEffect(() => {
+  }, [
+    currentView,
+    isQuickChatPinned,
+    onClose,
+    quickChatConfig,
+    submenuStack.length,
+    visible
+  ]);
+  useEffect3(() => {
     const menuElement = menuRef.current;
     if (!visible || !menuElement) return;
     const preventTouchDefault = (e) => {
@@ -1293,9 +3195,6 @@ function ContextMenu({
       menuElement.removeEventListener("touchmove", preventTouchDefault);
     };
   }, [visible]);
-  if (!visible || !targetElement) {
-    return null;
-  }
   const handleItemClick = (item) => {
     if (item.status === "comingSoon") {
       return;
@@ -1364,85 +3263,166 @@ function ContextMenu({
   const handleRetakeScreenshots = () => {
     captureScreenshots();
   };
-  const containerWidth = currentView === "screenshot-preview" ? 360 : void 0;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref: menuRef,
-      "aria-label": "Feedback options",
-      className,
-      role: "menu",
-      style: {
-        ...menuStyles.container,
-        left: adjustedPosition.x,
-        top: adjustedPosition.y,
-        ...containerWidth ? { minWidth: containerWidth, width: containerWidth } : {},
-        touchAction: "none",
-        userSelect: "none",
-        WebkitTouchCallout: "none",
-        WebkitUserSelect: "none",
-        ...isDragging ? { cursor: "grabbing" } : {},
-        ...style
-      },
-      children: [
-        !header && currentView !== "screenshot-preview" && /* @__PURE__ */ jsxs2(DefaultHeader, { styles: menuStyles.header, title: "Send Feedback", children: [
-          showPreview && /* @__PURE__ */ jsx2("div", { style: menuStyles.screenshotIndicator, children: /* @__PURE__ */ jsx2(CameraIcon, { className: "w-3 h-3" }) }),
-          positionMode === "dynamic" && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              "data-drag-handle": true,
-              onMouseEnter: (e) => {
-                e.currentTarget.style.opacity = "1";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.opacity = "0.5";
-              },
-              onPointerDown: handleDragStart,
-              style: {
-                ...menuStyles.dragHandle,
-                cursor: isDragging ? "grabbing" : "grab"
+  const handleQuickChatToggle = () => {
+    if (currentView === "quick-chat" && !isQuickChatPinned) {
+      setCurrentView("menu");
+    } else {
+      setCurrentView("quick-chat");
+    }
+  };
+  const handleQuickChatPin = (pinned) => {
+    setIsQuickChatPinned(pinned);
+    try {
+      if (pinned) {
+        sessionStorage.setItem("anyclick-quick-chat-pinned", "true");
+      } else {
+        sessionStorage.removeItem("anyclick-quick-chat-pinned");
+      }
+    } catch {
+    }
+    if (pinned) {
+      setCurrentView("menu");
+    }
+  };
+  const handleQuickChatClose = () => {
+    setIsQuickChatPinned(false);
+    try {
+      sessionStorage.removeItem("anyclick-quick-chat-pinned");
+    } catch {
+    }
+    setCurrentView("menu");
+  };
+  const containerWidth = currentView === "screenshot-preview" ? 360 : currentView === "quick-chat" && !isQuickChatPinned ? 320 : void 0;
+  const showPinnedDrawer = isQuickChatPinned && quickChatConfig;
+  const showMenu = visible && targetElement;
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    showPinnedDrawer && /* @__PURE__ */ jsx3(
+      QuickChat,
+      {
+        visible: true,
+        targetElement,
+        containerElement,
+        onClose: handleQuickChatClose,
+        onPin: handleQuickChatPin,
+        isPinned: true,
+        config: quickChatConfig
+      }
+    ),
+    showMenu && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: menuRef,
+        "aria-label": "Feedback options",
+        className,
+        role: "menu",
+        style: {
+          ...menuStyles.container,
+          left: adjustedPosition.x,
+          top: adjustedPosition.y,
+          ...containerWidth ? { minWidth: containerWidth, width: containerWidth } : {},
+          touchAction: "none",
+          userSelect: "none",
+          WebkitTouchCallout: "none",
+          WebkitUserSelect: "none",
+          ...isDragging ? { cursor: "grabbing" } : {},
+          ...style
+        },
+        children: [
+          !header && currentView !== "screenshot-preview" && currentView !== "quick-chat" && /* @__PURE__ */ jsxs3(DefaultHeader, { styles: menuStyles.header, title: "Send Feedback", children: [
+            positionMode === "dynamic" && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-drag-handle": true,
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.opacity = "1";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.opacity = "0.5";
+                },
+                onPointerDown: handleDragStart,
+                style: {
+                  ...menuStyles.dragHandle,
+                  cursor: isDragging ? "grabbing" : "grab"
+                },
+                title: "Drag to move",
+                children: /* @__PURE__ */ jsx3(GripVertical, { className: "w-4 h-4" })
+              }
+            ),
+            showPreview && /* @__PURE__ */ jsx3("div", { style: menuStyles.screenshotIndicator, children: /* @__PURE__ */ jsx3(CameraIcon, { className: "w-3 h-3" }) }),
+            quickChatConfig && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: handleQuickChatToggle,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "24px",
+                  height: "24px",
+                  border: "none",
+                  borderRadius: "4px",
+                  backgroundColor: isQuickChatPinned ? "var(--anyclick-menu-accent, #0066cc)" : "transparent",
+                  color: isQuickChatPinned ? "#fff" : "var(--anyclick-menu-accent, #0066cc)",
+                  cursor: "pointer",
+                  transition: "all 0.15s ease"
+                },
+                title: isQuickChatPinned ? "Quick Chat (pinned)" : "Quick Ask AI",
+                children: /* @__PURE__ */ jsx3(Sparkles, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          !!header && header,
+          currentView === "menu" && /* @__PURE__ */ jsxs3("div", { style: menuStyles.itemList, children: [
+            submenuStack.length > 0 && /* @__PURE__ */ jsx3(BackButton, { onClick: handleBack }),
+            currentItems.map((item) => /* @__PURE__ */ jsx3(
+              MenuItem,
+              {
+                disabled: isSubmitting,
+                hasChildren: item.children && item.children.length > 0,
+                item,
+                onClick: () => handleItemClick(item)
               },
-              title: "Drag to move",
-              children: /* @__PURE__ */ jsx2(GripVertical, { className: "w-4 h-4" })
+              item.type
+            ))
+          ] }),
+          currentView === "comment" && /* @__PURE__ */ jsx3(
+            CommentForm,
+            {
+              isSubmitting,
+              onCancel: handleCommentCancel,
+              onSubmit: handleCommentSubmit
             }
-          )
-        ] }),
-        !!header && header,
-        currentView === "menu" && /* @__PURE__ */ jsxs2("div", { style: menuStyles.itemList, children: [
-          submenuStack.length > 0 && /* @__PURE__ */ jsx2(BackButton, { onClick: handleBack }),
-          currentItems.map((item) => /* @__PURE__ */ jsx2(
-            MenuItem,
+          ),
+          currentView === "screenshot-preview" && /* @__PURE__ */ jsx3(
+            ScreenshotPreview,
             {
-              disabled: isSubmitting,
-              hasChildren: item.children && item.children.length > 0,
-              item,
-              onClick: () => handleItemClick(item)
-            },
-            item.type
-          ))
-        ] }),
-        currentView === "comment" && /* @__PURE__ */ jsx2(
-          CommentForm,
-          {
-            isSubmitting,
-            onCancel: handleCommentCancel,
-            onSubmit: handleCommentSubmit
-          }
-        ),
-        currentView === "screenshot-preview" && /* @__PURE__ */ jsx2(
-          ScreenshotPreview,
-          {
-            isLoading: isCapturing,
-            isSubmitting,
-            onCancel: handleScreenshotCancel,
-            onConfirm: handleScreenshotConfirm,
-            onRetake: handleRetakeScreenshots,
-            screenshots
-          }
-        )
-      ]
-    }
-  );
+              isLoading: isCapturing,
+              isSubmitting,
+              onCancel: handleScreenshotCancel,
+              onConfirm: handleScreenshotConfirm,
+              onRetake: handleRetakeScreenshots,
+              screenshots
+            }
+          ),
+          currentView === "quick-chat" && quickChatConfig && !isQuickChatPinned && /* @__PURE__ */ jsx3(
+            QuickChat,
+            {
+              visible: true,
+              targetElement,
+              containerElement,
+              onClose: handleQuickChatClose,
+              onPin: handleQuickChatPin,
+              isPinned: false,
+              config: quickChatConfig,
+              initialInput: initialChatInput,
+              onInitialInputConsumed: () => setInitialChatInput("")
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 
 // src/context.ts
@@ -1465,12 +3445,12 @@ function useFeedback() {
 }
 
 // src/store.ts
-import { create } from "zustand";
+import { create as create2 } from "zustand";
 var providerIdCounter = 0;
 function generateProviderId() {
   return `anyclick-provider-${++providerIdCounter}`;
 }
-var useProviderStore = create((set, get) => ({
+var useProviderStore = create2((set, get) => ({
   providers: /* @__PURE__ */ new Map(),
   findProvidersForElement: (element) => {
     const { providers } = get();
@@ -1626,7 +3606,7 @@ function dispatchContextMenuEvent(event, element) {
 }
 
 // src/AnyclickProvider.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultMenuItems = [
   { label: "Report an issue", showComment: true, type: "issue" },
   { label: "Request a feature", showComment: true, type: "feature" },
@@ -1649,6 +3629,7 @@ function AnyclickProvider({
   metadata,
   onSubmitError,
   onSubmitSuccess,
+  quickChatConfig,
   scoped = false,
   screenshotConfig,
   stripAttributes,
@@ -1657,18 +3638,18 @@ function AnyclickProvider({
   touchHoldDurationMs,
   touchMoveThreshold
 }) {
-  const [isSubmitting, setIsSubmitting] = useState3(false);
-  const [menuVisible, setMenuVisible] = useState3(false);
-  const [menuPosition, setMenuPosition] = useState3(OFFSCREEN_POSITION2);
-  const [targetElement, setTargetElement] = useState3(null);
-  const [containerElement, setContainerElement] = useState3(
+  const [isSubmitting, setIsSubmitting] = useState5(false);
+  const [menuVisible, setMenuVisible] = useState5(false);
+  const [menuPosition, setMenuPosition] = useState5(OFFSCREEN_POSITION2);
+  const [targetElement, setTargetElement] = useState5(null);
+  const [containerElement, setContainerElement] = useState5(
     null
   );
   const providerId = useId();
-  const containerRef = useRef2(null);
-  const [containerReady, setContainerReady] = useState3(!scoped);
-  const clientRef = useRef2(null);
-  const setContainerRef = useCallback2(
+  const containerRef = useRef4(null);
+  const [containerReady, setContainerReady] = useState5(!scoped);
+  const clientRef = useRef4(null);
+  const setContainerRef = useCallback4(
     (node) => {
       containerRef.current = node;
       if (scoped && node) {
@@ -1697,7 +3678,7 @@ function AnyclickProvider({
     updateProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
-  const actualDepth = useMemo2(() => {
+  const actualDepth = useMemo4(() => {
     if (!parentContext) return 0;
     let d = 0;
     let currentId = parentId;
@@ -1711,7 +3692,7 @@ function AnyclickProvider({
   }, [parentContext, parentId]);
   const isDisabledByTheme = theme === null || theme?.disabled === true;
   const effectiveDisabled = disabled || isDisabledByTheme;
-  const localTheme = useMemo2(() => {
+  const localTheme = useMemo4(() => {
     if (theme === null) {
       return { disabled: true };
     }
@@ -1726,7 +3707,7 @@ function AnyclickProvider({
       ...theme
     };
   }, [highlightConfig, menuClassName, menuStyle, screenshotConfig, theme]);
-  const handleContextMenu = useCallback2(
+  const handleContextMenu = useCallback4(
     (event, element) => {
       if (!scoped && isElementInDisabledScope(element)) {
         return false;
@@ -1780,7 +3761,7 @@ function AnyclickProvider({
     scoped,
     unregisterProvider
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     updateProvider(providerId, {
       disabled: effectiveDisabled,
       onContextMenu: handleContextMenu,
@@ -1793,7 +3774,7 @@ function AnyclickProvider({
     providerId,
     updateProvider
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (isDisabledByAncestor(providerId)) {
       return;
     }
@@ -1841,7 +3822,7 @@ function AnyclickProvider({
     touchHoldDurationMs,
     touchMoveThreshold
   ]);
-  const submitAnyclick = useCallback2(
+  const submitAnyclick = useCallback4(
     async (element, type, comment, screenshots) => {
       const client = clientRef.current;
       if (!client) return;
@@ -1862,7 +3843,7 @@ function AnyclickProvider({
     },
     [metadata]
   );
-  const openMenu = useCallback2(
+  const openMenu = useCallback4(
     (element, position) => {
       setTargetElement(element);
       const mergedTheme2 = getMergedTheme(providerId);
@@ -1876,13 +3857,13 @@ function AnyclickProvider({
     },
     [getMergedTheme, highlightConfig, providerId]
   );
-  const closeMenu = useCallback2(() => {
+  const closeMenu = useCallback4(() => {
     setMenuVisible(false);
     setMenuPosition(OFFSCREEN_POSITION2);
     setTargetElement(null);
     setContainerElement(null);
   }, []);
-  const handleMenuSelect = useCallback2(
+  const handleMenuSelect = useCallback4(
     (type, comment, screenshots) => {
       if (targetElement) {
         submitAnyclick(targetElement, type, comment, screenshots);
@@ -1891,7 +3872,7 @@ function AnyclickProvider({
     [submitAnyclick, targetElement]
   );
   const inheritedTheme = getMergedTheme(providerId);
-  const mergedTheme = useMemo2(
+  const mergedTheme = useMemo4(
     () => ({
       ...inheritedTheme,
       ...localTheme,
@@ -1914,7 +3895,7 @@ function AnyclickProvider({
   const effectiveMenuClassName = mergedTheme.menuClassName ?? menuClassName;
   const effectiveHighlightConfig = mergedTheme.highlightConfig ?? highlightConfig;
   const effectiveScreenshotConfig = mergedTheme.screenshotConfig ?? screenshotConfig;
-  const contextValue = useMemo2(
+  const contextValue = useMemo4(
     () => ({
       closeMenu,
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
@@ -1937,7 +3918,7 @@ function AnyclickProvider({
       submitAnyclick
     ]
   );
-  const content = scoped ? /* @__PURE__ */ jsx3(
+  const content = scoped ? /* @__PURE__ */ jsx4(
     "div",
     {
       ref: setContainerRef,
@@ -1946,9 +3927,9 @@ function AnyclickProvider({
       children
     }
   ) : children;
-  return /* @__PURE__ */ jsxs3(AnyclickContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsx4(AnyclickContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { "data-anyclick-root": true, children: [
     content,
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       ContextMenu,
       {
         className: effectiveMenuClassName,
@@ -1960,18 +3941,19 @@ function AnyclickProvider({
         onClose: closeMenu,
         onSelect: handleMenuSelect,
         position: menuPosition,
+        quickChatConfig,
         screenshotConfig: effectiveScreenshotConfig,
         style: effectiveMenuStyle,
         targetElement,
         visible: menuVisible && !effectiveDisabled
       }
     )
-  ] });
+  ] }) });
 }
 var FeedbackProvider = AnyclickProvider;
 
 // src/FunModeBridge.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
 import {
   usePointer
 } from "@ewjdev/anyclick-pointer";
@@ -2020,9 +4002,9 @@ function buildFunConfig(theme, container) {
 function FunModeBridge() {
   const { setConfig } = usePointer();
   const providerStore = useProviderStore();
-  const activeProviderRef = useRef3(null);
-  const cachedConfigs = useRef3({});
-  const findActiveFunProvider = useMemo3(() => {
+  const activeProviderRef = useRef5(null);
+  const cachedConfigs = useRef5({});
+  const findActiveFunProvider = useMemo5(() => {
     return (el) => {
       if (!el) return null;
       const providers = providerStore.findProvidersForElement(el);
@@ -2034,7 +4016,7 @@ function FunModeBridge() {
       return null;
     };
   }, [providerStore]);
-  useEffect3(() => {
+  useEffect5(() => {
     const handleMove = (event) => {
       const el = document.elementFromPoint(event.clientX, event.clientY);
       const provider = findActiveFunProvider(el);
@@ -2068,16 +4050,76 @@ function FunModeBridge() {
   return null;
 }
 
+// src/ui/button.tsx
+import { forwardRef } from "react";
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/ui/button.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var variantClasses = {
+  default: "ac-bg-accent ac-text-accent-foreground hover:ac-bg-accent-muted ac-border ac-border-border",
+  ghost: "ac-bg-transparent hover:ac-bg-surface-muted ac-text-text",
+  outline: "ac-bg-transparent ac-text-text ac-border ac-border-border hover:ac-bg-surface-muted",
+  destructive: "ac-bg-destructive ac-text-accent-foreground hover:ac-bg-destructive/80"
+};
+var sizeClasses = {
+  sm: "ac-h-8 ac-px-3 ac-text-sm",
+  md: "ac-h-10 ac-px-4 ac-text-sm",
+  lg: "ac-h-11 ac-px-5 ac-text-base"
+};
+var Button = forwardRef(
+  ({ className, variant = "default", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        ref,
+        className: cn(
+          "ac-inline-flex ac-items-center ac-justify-center ac-gap-2 ac-rounded-md ac-font-medium ac-transition-colors focus-visible:ac-outline focus-visible:ac-outline-2 focus-visible:ac-outline-offset-2 focus-visible:ac-outline-accent disabled:ac-opacity-50 disabled:ac-cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/input.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Input = forwardRef2(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        className: cn(
+          "ac-h-10 ac-w-full ac-rounded-md ac-border ac-border-border ac-bg-surface ac-text-text ac-placeholder-text-muted ac-px-3 ac-py-2 ac-text-sm focus-visible:ac-outline focus-visible:ac-outline-2 focus-visible:ac-outline-offset-2 focus-visible:ac-outline-accent disabled:ac-opacity-50 disabled:ac-cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
 // src/InspectDialog/InspectDialogManager.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useState as useState7 } from "react";
 
 // src/InspectDialog/InspectSimple.tsx
-import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef6, useState as useState6 } from "react";
 import {
   captureScreenshot,
-  getElementInspectInfo
+  getElementInspectInfo as getElementInspectInfo2
 } from "@ewjdev/anyclick-core";
-import { Camera, Code, Copy, ExternalLink, FileText, X } from "lucide-react";
+import { Camera, Code, Copy as Copy2, ExternalLink as ExternalLink2, FileText, X as X2 } from "lucide-react";
 
 // src/ide.ts
 var DEFAULT_IDE_CONFIG = {
@@ -2179,7 +4221,7 @@ function formatSourceLocation(location) {
 }
 
 // src/InspectDialog/InspectSimple.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_COMPACT_CONFIG = {
   scale: 0.5,
   fonts: {
@@ -2241,8 +4283,8 @@ function downloadDataUrl(dataUrl, filename) {
   link.click();
 }
 function useIsMobile() {
-  const [isMobile, setIsMobile] = useState4(false);
-  useEffect4(() => {
+  const [isMobile, setIsMobile] = useState6(false);
+  useEffect6(() => {
     const mq = window.matchMedia("(max-width: 640px)");
     setIsMobile(mq.matches);
     const handler = (e) => setIsMobile(e.matches);
@@ -2260,20 +4302,20 @@ function InspectSimple({
   className,
   highlightColors
 }) {
-  const [info, setInfo] = useState4(null);
-  const [sourceLocation, setSourceLocation] = useState4(
+  const [info, setInfo] = useState6(null);
+  const [sourceLocation, setSourceLocation] = useState6(
     null
   );
-  const [status, setStatus] = useState4(null);
-  const [saving, setSaving] = useState4(false);
-  const dialogRef = useRef4(null);
+  const [status, setStatus] = useState6(null);
+  const [saving, setSaving] = useState6(false);
+  const dialogRef = useRef6(null);
   const isMobile = useIsMobile();
-  useEffect4(() => {
+  useEffect6(() => {
     if (!status) return;
     const timer = setTimeout(() => setStatus(null), 5e3);
     return () => clearTimeout(timer);
   }, [status]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!visible || !targetElement) return;
     try {
       clearHighlights();
@@ -2282,7 +4324,7 @@ function InspectSimple({
       if (container) highlightContainer(container, highlightColors);
     } catch {
     }
-    const nextInfo = getElementInspectInfo(targetElement);
+    const nextInfo = getElementInspectInfo2(targetElement);
     setInfo(nextInfo);
     setSourceLocation(
       findSourceLocationInAncestors(targetElement) ?? nextInfo.sourceLocation ?? null
@@ -2291,7 +4333,7 @@ function InspectSimple({
       clearHighlights();
     };
   }, [visible, targetElement, highlightColors]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (dialogRef.current && !dialogRef.current.contains(e.target)) {
@@ -2306,7 +4348,7 @@ function InspectSimple({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [visible, onClose]);
-  const identityLabel = useMemo4(() => {
+  const identityLabel = useMemo6(() => {
     if (!info) return "Select an element";
     const classes = info.classNames[0] ? `.${info.classNames[0]}` : "";
     const id = info.id ? `#${info.id}` : "";
@@ -2392,8 +4434,8 @@ function InspectSimple({
     overflow: "hidden",
     ...style
   };
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -2408,14 +4450,14 @@ function InspectSimple({
         role: "presentation"
       }
     ),
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5(
       "div",
       {
         ref: dialogRef,
         className: `anyclick-tiny-inspect ${className ?? ""}`,
         style: dialogStyles,
         children: [
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
@@ -2427,7 +4469,7 @@ function InspectSimple({
                 borderBottom: "1px solid #1e293b"
               },
               children: [
-                isMobile && /* @__PURE__ */ jsx4(
+                isMobile && /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -2442,8 +4484,8 @@ function InspectSimple({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx7(
                     "span",
                     {
                       style: {
@@ -2458,31 +4500,31 @@ function InspectSimple({
                       children: identityLabel
                     }
                   ),
-                  sourceLocation && /* @__PURE__ */ jsx4(
+                  sourceLocation && /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
                       onClick: handleOpenIDE,
                       title: formatSourceLocation(sourceLocation),
                       style: iconBtnStyle,
-                      children: /* @__PURE__ */ jsx4(ExternalLink, { size: 14 })
+                      children: /* @__PURE__ */ jsx7(ExternalLink2, { size: 14 })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
                     onClick: onClose,
                     style: iconBtnStyle,
                     "aria-label": "Close inspector",
-                    children: /* @__PURE__ */ jsx4(X, { size: 16 })
+                    children: /* @__PURE__ */ jsx7(X2, { size: 16 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
@@ -2492,7 +4534,7 @@ function InspectSimple({
                 gap: 8
               },
               children: [
-                info?.selector && /* @__PURE__ */ jsx4(
+                info?.selector && /* @__PURE__ */ jsx7(
                   "code",
                   {
                     style: {
@@ -2507,7 +4549,7 @@ function InspectSimple({
                     children: info.selector
                   }
                 ),
-                status && /* @__PURE__ */ jsx4(
+                status && /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -2519,7 +4561,7 @@ function InspectSimple({
                     children: status
                   }
                 ),
-                /* @__PURE__ */ jsxs4(
+                /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     style: {
@@ -2528,7 +4570,7 @@ function InspectSimple({
                       gap: 6
                     },
                     children: [
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -2536,10 +4578,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy CSS selector",
                           "aria-label": "Copy CSS selector",
-                          children: /* @__PURE__ */ jsx4(Copy, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Copy2, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -2547,10 +4589,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy text content",
                           "aria-label": "Copy text content",
-                          children: /* @__PURE__ */ jsx4(FileText, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(FileText, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -2558,10 +4600,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy HTML markup",
                           "aria-label": "Copy HTML markup",
-                          children: /* @__PURE__ */ jsx4(Code, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Code, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -2573,7 +4615,7 @@ function InspectSimple({
                           disabled: saving,
                           title: "Save screenshot",
                           "aria-label": "Save screenshot",
-                          children: /* @__PURE__ */ jsx4(Camera, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Camera, { size: 15 })
                         }
                       )
                     ]
@@ -2616,7 +4658,7 @@ var iconActionStyle = {
 };
 
 // src/InspectDialog/InspectDialogManager.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var INSPECT_DIALOG_EVENT = "anyclick:inspect";
 function openInspectDialog(targetElement) {
   if (typeof window === "undefined") return;
@@ -2639,16 +4681,16 @@ function InspectDialogManager({
   initialPinnedPosition = "floating",
   compactConfig
 }) {
-  const [visible, setVisible] = useState5(false);
-  const [targetElement, setTargetElement] = useState5(null);
-  const handleClose = useCallback3(() => {
+  const [visible, setVisible] = useState7(false);
+  const [targetElement, setTargetElement] = useState7(null);
+  const handleClose = useCallback5(() => {
     setVisible(false);
     setTargetElement(null);
   }, []);
-  const handleSelectElement = useCallback3((element) => {
+  const handleSelectElement = useCallback5((element) => {
     setTargetElement(element);
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     const handleInspectEvent = (event) => {
       const customEvent = event;
       if (customEvent.detail?.targetElement) {
@@ -2661,7 +4703,7 @@ function InspectDialogManager({
       window.removeEventListener(INSPECT_DIALOG_EVENT, handleInspectEvent);
     };
   }, []);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     InspectSimple,
     {
       visible,
@@ -2723,6 +4765,20 @@ var presetDefaults = {
         showComment: false,
         type: "search_google"
       },
+      {
+        label: "Ask t3.chat",
+        onClick: ({ closeMenu }) => {
+          closeMenu();
+          if (typeof window === "undefined") return false;
+          const selection = window.getSelection()?.toString().trim();
+          const query = selection && selection.length > 0 ? selection : "";
+          const url = query ? `https://t3.chat/?q=${encodeURIComponent(query)}` : "https://t3.chat";
+          window.open(url, "_blank", "noopener,noreferrer");
+          return false;
+        },
+        showComment: false,
+        type: "ask_t3chat"
+      },
       {
         label: "Share\u2026",
         onClick: async ({ closeMenu }) => {
@@ -2992,6 +5048,172 @@ function listPresets() {
     }))
   }));
 }
+function createT3ChatMenuItem(options = {}) {
+  const { label = "Ask t3.chat", baseUrl = "https://t3.chat" } = options;
+  return {
+    label,
+    onClick: ({ closeMenu }) => {
+      closeMenu();
+      if (typeof window === "undefined") return false;
+      const selection = window.getSelection()?.toString().trim();
+      const query = selection && selection.length > 0 ? selection : "";
+      const url = query ? `${baseUrl}/?q=${encodeURIComponent(query)}` : baseUrl;
+      window.open(url, "_blank", "noopener,noreferrer");
+      return false;
+    },
+    showComment: false,
+    type: "ask_t3chat"
+  };
+}
+function getSelectedText() {
+  if (typeof window === "undefined") return "";
+  return window.getSelection()?.toString().trim() ?? "";
+}
+function hasTextSelection() {
+  return getSelectedText().length > 0;
+}
+function detectImageElement(element) {
+  if (!element) return { isImage: false };
+  if (element.tagName === "IMG") {
+    const img = element;
+    return {
+      isImage: true,
+      src: img.src || img.currentSrc,
+      type: "img"
+    };
+  }
+  if (element.tagName === "PICTURE") {
+    const img = element.querySelector("img");
+    return {
+      isImage: true,
+      src: img?.src || img?.currentSrc,
+      type: "picture"
+    };
+  }
+  if (element.tagName === "SVG" || element.tagName === "svg") {
+    return {
+      isImage: true,
+      type: "svg"
+    };
+  }
+  if (element.tagName === "CANVAS") {
+    return {
+      isImage: true,
+      type: "canvas"
+    };
+  }
+  if (typeof window !== "undefined") {
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundImage = computedStyle.backgroundImage;
+    if (backgroundImage && backgroundImage !== "none") {
+      const urlMatch = backgroundImage.match(/url\(["']?(.+?)["']?\)/);
+      if (urlMatch) {
+        return {
+          isImage: true,
+          src: urlMatch[1],
+          type: "background"
+        };
+      }
+    }
+  }
+  const imgChild = element.querySelector("img");
+  if (imgChild) {
+    return {
+      isImage: true,
+      src: imgChild.src || imgChild.currentSrc,
+      type: "img"
+    };
+  }
+  return { isImage: false };
+}
+function createUploadThingMenuItem(options = {}) {
+  const {
+    label = "Upload to UploadThing",
+    endpoint = "/api/uploadthing",
+    onUploadComplete,
+    onUploadError
+  } = options;
+  return {
+    label,
+    onClick: async ({ closeMenu, targetElement }) => {
+      if (!targetElement) {
+        onUploadError?.(new Error("No target element"));
+        return false;
+      }
+      try {
+        const imageInfo = detectImageElement(targetElement);
+        if (imageInfo.isImage && imageInfo.src) {
+          const response = await fetch(imageInfo.src);
+          const blob = await response.blob();
+          const formData = new FormData();
+          const filename = `image-${Date.now()}.${blob.type.split("/")[1] || "png"}`;
+          formData.append("file", blob, filename);
+          const uploadResponse = await fetch(endpoint, {
+            method: "POST",
+            body: formData
+          });
+          if (!uploadResponse.ok) {
+            throw new Error(`Upload failed: ${uploadResponse.status}`);
+          }
+          const result = await uploadResponse.json();
+          onUploadComplete?.(result);
+        } else if (imageInfo.isImage && imageInfo.type === "canvas") {
+          const canvas = targetElement;
+          const dataUrl = canvas.toDataURL("image/png");
+          const response = await fetch(dataUrl);
+          const blob = await response.blob();
+          const formData = new FormData();
+          formData.append("file", blob, `canvas-${Date.now()}.png`);
+          const uploadResponse = await fetch(endpoint, {
+            method: "POST",
+            body: formData
+          });
+          if (!uploadResponse.ok) {
+            throw new Error(`Upload failed: ${uploadResponse.status}`);
+          }
+          const result = await uploadResponse.json();
+          onUploadComplete?.(result);
+        } else {
+          onUploadError?.(
+            new Error(
+              "Element is not an image. Screenshot upload requires anyclick-core."
+            )
+          );
+        }
+      } catch (error) {
+        onUploadError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+      closeMenu();
+      return false;
+    },
+    showComment: false,
+    type: "upload_image"
+  };
+}
+function createUploadScreenshotMenuItem(options = {}) {
+  const {
+    label = "Upload Screenshot",
+    endpoint = "/api/uploadthing",
+    onUploadComplete,
+    onUploadError
+  } = options;
+  return {
+    label,
+    badge: { label: "Coming soon", tone: "info" },
+    status: "comingSoon",
+    onClick: async ({ closeMenu }) => {
+      onUploadError?.(
+        new Error("Screenshot upload will be available in a future release")
+      );
+      closeMenu();
+      return false;
+    },
+    showComment: false,
+    type: "upload_screenshot"
+  };
+}
 
 // src/types.ts
 function filterMenuItemsByRole(items, userContext) {
@@ -3021,7 +5243,7 @@ import {
 } from "@ewjdev/anyclick-core";
 
 // src/AnyclickLogo.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function AnyclickLogo({
   size = 64,
   borderWidth = 2,
@@ -3033,7 +5255,7 @@ function AnyclickLogo({
 }) {
   const cursorSize = size * 0.45;
   const cursorStroke = borderWidth;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     {
       width: size,
@@ -3047,7 +5269,7 @@ function AnyclickLogo({
       role: onClick ? "button" : "img",
       "aria-label": "Anyclick Logo",
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx9(
           "circle",
           {
             cx: size / 2,
@@ -3058,11 +5280,11 @@ function AnyclickLogo({
             strokeWidth: borderWidth
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx9(
           "g",
           {
             transform: `translate(${(size - cursorSize) / 2}, ${(size - cursorSize) / 2})`,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx9(
               "path",
               {
                 d: `
@@ -3095,7 +5317,7 @@ import {
   getAccessibilityInfo,
   getBoxModelInfo,
   getAttributes,
-  getElementInspectInfo as getElementInspectInfo2,
+  getElementInspectInfo as getElementInspectInfo3,
   formatStylesAsCSS,
   formatBoxModel,
   CURATED_STYLE_PROPERTIES,
@@ -3106,17 +5328,21 @@ export {
   AnyclickContext,
   AnyclickLogo,
   AnyclickProvider,
+  Button,
   CURATED_STYLE_PROPERTIES,
   ContextMenu,
   DEFAULT_COMPACT_CONFIG,
+  DEFAULT_QUICK_CHAT_CONFIG,
   DEFAULT_SCREENSHOT_CONFIG2 as DEFAULT_SCREENSHOT_CONFIG,
   DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext,
   FeedbackProvider,
   FunModeBridge,
   INSPECT_DIALOG_EVENT,
+  Input,
   InspectDialogManager,
   InspectSimple,
+  QuickChat,
   ScreenshotPreview,
   applyHighlights,
   buildIDEUrl,
@@ -3125,9 +5351,13 @@ export {
   clearHighlights,
   createIDEOpener,
   createPresetMenu,
+  createT3ChatMenuItem,
+  createUploadScreenshotMenuItem,
+  createUploadThingMenuItem,
   darkMenuStyles,
   defaultContainerSelectors,
   defaultHighlightColors,
+  detectImageElement,
   detectPreferredIDE,
   dispatchContextMenuEvent,
   estimateTotalSize2 as estimateTotalSize,
@@ -3144,8 +5374,10 @@ export {
   getBadgeStyle,
   getBoxModelInfo,
   getComputedStyles,
-  getElementInspectInfo2 as getElementInspectInfo,
+  getElementInspectInfo3 as getElementInspectInfo,
+  getSelectedText,
   getSourceLocationFromElement,
+  hasTextSelection,
   highlightContainer,
   highlightTarget,
   isIDEProtocolSupported,
@@ -3156,8 +5388,11 @@ export {
   openInIDE,
   openInspectDialog,
   presetDefaults,
+  quickChatKeyframes,
+  quickChatStyles,
   useAnyclick,
   useFeedback,
-  useProviderStore
+  useProviderStore,
+  useQuickChat
 };
 //# sourceMappingURL=index.mjs.map