@ewjdev/anyclick-react 2.0.0 → 3.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 useMemo3,
+  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,1356 @@ import {
   FlagIcon,
   GripVertical,
   PlusIcon,
+  Sparkles,
   ThumbsUpIcon
 } from "lucide-react";
 
+// src/QuickChat/QuickChat.tsx
+import React, {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+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",
+    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, useRef, useState } from "react";
+import { getElementInspectInfo } from "@ewjdev/anyclick-core";
+
+// 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-mini",
+  prePassModel: "gpt-5-nano",
+  maxResponseLength: 500,
+  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.ts
+var PINNED_STATE_KEY = "anyclick-quick-chat-pinned";
+var CHAT_HISTORY_KEY = "anyclick-quick-chat-history";
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function getPinnedState() {
+  if (typeof window === "undefined") return false;
+  try {
+    return sessionStorage.getItem(PINNED_STATE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+function getChatHistory() {
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = sessionStorage.getItem(CHAT_HISTORY_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed.map((msg) => ({
+        ...msg,
+        isStreaming: false,
+        actions: void 0
+      }));
+    }
+  } catch {
+  }
+  return [];
+}
+function saveChatHistory(messages) {
+  if (typeof window === "undefined") return;
+  try {
+    const toStore = messages.slice(-10).map((msg) => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      timestamp: msg.timestamp
+    }));
+    sessionStorage.setItem(CHAT_HISTORY_KEY, JSON.stringify(toStore));
+  } catch {
+  }
+}
+function clearChatHistory() {
+  if (typeof window === "undefined") return;
+  try {
+    sessionStorage.removeItem(CHAT_HISTORY_KEY);
+  } catch {
+  }
+}
+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 [category, 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("Failed to extract context:", error);
+  }
+  return chunks;
+}
+function buildContextString(chunks) {
+  const includedChunks = chunks.filter((c) => c.included);
+  if (includedChunks.length === 0) return "";
+  return includedChunks.map((c) => `[${c.label}]: ${c.content}`).join("\n");
+}
+function useQuickChat(targetElement, containerElement, config = {}) {
+  const mergedConfig = { ...DEFAULT_QUICK_CHAT_CONFIG, ...config };
+  const abortControllerRef = useRef(null);
+  const initializedRef = useRef(false);
+  const [state, setState] = useState({
+    input: "",
+    messages: [],
+    isLoadingSuggestions: false,
+    isSending: false,
+    isStreaming: false,
+    suggestedPrompts: [],
+    contextChunks: [],
+    error: null
+  });
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    const isPinned = getPinnedState();
+    if (isPinned) {
+      const history = getChatHistory();
+      if (history.length > 0) {
+        setState((prev) => ({ ...prev, messages: history }));
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (targetElement) {
+      const chunks = extractContextChunks(targetElement, containerElement);
+      setState((prev) => ({ ...prev, contextChunks: chunks }));
+    }
+  }, [targetElement, containerElement]);
+  useEffect(() => {
+    if (!mergedConfig.showSuggestions || state.contextChunks.length === 0 || state.suggestedPrompts.length > 0) {
+      return;
+    }
+    const fetchSuggestions = async () => {
+      setState((prev) => ({ ...prev, isLoadingSuggestions: true }));
+      try {
+        const contextString = buildContextString(state.contextChunks);
+        const response = await fetch(mergedConfig.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "suggest",
+            context: contextString,
+            model: mergedConfig.prePassModel
+          })
+        });
+        if (response.ok) {
+          const data = await response.json();
+          if (data.suggestions && Array.isArray(data.suggestions)) {
+            setState((prev) => ({
+              ...prev,
+              suggestedPrompts: data.suggestions.map(
+                (text, i) => ({
+                  id: `suggestion-${i}`,
+                  text
+                })
+              ),
+              isLoadingSuggestions: false
+            }));
+            return;
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch suggestions:", error);
+      }
+      setState((prev) => ({
+        ...prev,
+        suggestedPrompts: [
+          { id: "s1", text: "What is this element?" },
+          { id: "s2", text: "How can I style this?" },
+          { id: "s3", text: "Is this accessible?" }
+        ],
+        isLoadingSuggestions: false
+      }));
+    };
+    fetchSuggestions();
+  }, [
+    state.contextChunks,
+    state.suggestedPrompts.length,
+    mergedConfig.showSuggestions,
+    mergedConfig.endpoint,
+    mergedConfig.prePassModel
+  ]);
+  const setInput = useCallback((value) => {
+    setState((prev) => ({ ...prev, input: value }));
+  }, []);
+  const toggleChunk = useCallback((chunkId) => {
+    setState((prev) => ({
+      ...prev,
+      contextChunks: prev.contextChunks.map(
+        (chunk) => chunk.id === chunkId ? { ...chunk, included: !chunk.included } : chunk
+      )
+    }));
+  }, []);
+  const toggleAllChunks = useCallback((included) => {
+    setState((prev) => ({
+      ...prev,
+      contextChunks: prev.contextChunks.map((chunk) => ({
+        ...chunk,
+        included
+      }))
+    }));
+  }, []);
+  const selectSuggestion = useCallback((prompt) => {
+    setState((prev) => ({ ...prev, input: prompt.text }));
+  }, []);
+  const sendMessage = useCallback(
+    async (messageText) => {
+      const text = (messageText || state.input).trim();
+      if (!text) return;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      const userMessage = {
+        id: generateId(),
+        role: "user",
+        content: text,
+        timestamp: Date.now()
+      };
+      const assistantMessageId = generateId();
+      const assistantMessage = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: Date.now(),
+        isStreaming: true
+      };
+      setState((prev) => ({
+        ...prev,
+        input: "",
+        messages: [...prev.messages, userMessage, assistantMessage],
+        isSending: true,
+        isStreaming: true,
+        error: null
+      }));
+      try {
+        const contextString = buildContextString(state.contextChunks);
+        const response = await fetch(mergedConfig.endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "chat",
+            message: text,
+            context: contextString,
+            model: mergedConfig.model,
+            systemPrompt: mergedConfig.systemPrompt,
+            maxLength: mergedConfig.maxResponseLength
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) {
+          throw new Error(`Request failed: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        if (!reader) {
+          throw new Error("No response body");
+        }
+        const decoder = new TextDecoder();
+        let fullContent = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const chunk = decoder.decode(value, { stream: true });
+          fullContent += chunk;
+          if (fullContent.length > mergedConfig.maxResponseLength) {
+            fullContent = fullContent.slice(0, mergedConfig.maxResponseLength) + "...";
+          }
+          setState((prev) => ({
+            ...prev,
+            messages: prev.messages.map(
+              (msg) => msg.id === assistantMessageId ? { ...msg, content: fullContent } : msg
+            )
+          }));
+        }
+        setState((prev) => ({
+          ...prev,
+          messages: prev.messages.map(
+            (msg) => msg.id === assistantMessageId ? {
+              ...msg,
+              content: fullContent,
+              isStreaming: false,
+              actions: [
+                {
+                  id: "copy",
+                  label: "Copy",
+                  onClick: () => {
+                    navigator.clipboard.writeText(fullContent);
+                  }
+                },
+                {
+                  id: "research",
+                  label: "Research more",
+                  onClick: () => {
+                    setState((p) => ({
+                      ...p,
+                      input: `Tell me more about: ${text}`
+                    }));
+                  }
+                }
+              ]
+            } : msg
+          ),
+          isSending: false,
+          isStreaming: false
+        }));
+      } catch (error) {
+        if (error.name === "AbortError") {
+          return;
+        }
+        console.error("Chat error:", error);
+        setState((prev) => ({
+          ...prev,
+          messages: prev.messages.map(
+            (msg) => msg.id === assistantMessageId ? {
+              ...msg,
+              content: "Sorry, I couldn't process your request. Please try again.",
+              isStreaming: false
+            } : msg
+          ),
+          isSending: false,
+          isStreaming: false,
+          error: error.message
+        }));
+      }
+    },
+    [state.input, state.contextChunks, mergedConfig]
+  );
+  const clearMessages = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    clearChatHistory();
+    setState((prev) => ({
+      ...prev,
+      messages: [],
+      error: null
+    }));
+  }, []);
+  useEffect(() => {
+    if (state.messages.length > 0 && getPinnedState()) {
+      const completedMessages = state.messages.filter(
+        (msg) => !msg.isStreaming
+      );
+      if (completedMessages.length > 0) {
+        saveChatHistory(completedMessages);
+      }
+    }
+  }, [state.messages]);
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+  return {
+    ...state,
+    config: mergedConfig,
+    setInput,
+    toggleChunk,
+    toggleAllChunks,
+    selectSuggestion,
+    sendMessage,
+    clearMessages
+  };
+}
+
+// src/QuickChat/QuickChat.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PINNED_STATE_KEY2 = "anyclick-quick-chat-pinned";
+function getStoredPinnedState() {
+  if (typeof window === "undefined") return false;
+  try {
+    return sessionStorage.getItem(PINNED_STATE_KEY2) === "true";
+  } catch {
+    return false;
+  }
+}
+function setStoredPinnedState(pinned) {
+  if (typeof window === "undefined") return;
+  try {
+    if (pinned) {
+      sessionStorage.setItem(PINNED_STATE_KEY2, "true");
+    } else {
+      sessionStorage.removeItem(PINNED_STATE_KEY2);
+    }
+  } catch {
+  }
+}
+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 [localPinned, setLocalPinned] = useState2(() => getStoredPinnedState());
+  const isPinned = isPinnedProp || localPinned;
+  const handlePinToggle = useCallback2(() => {
+    const newPinned = !isPinned;
+    setLocalPinned(newPinned);
+    setStoredPinnedState(newPinned);
+    onPin?.(newPinned);
+  }, [isPinned, onPin]);
+  const handleClose = useCallback2(() => {
+    if (isPinned) {
+      setLocalPinned(false);
+      setStoredPinnedState(false);
+      onPin?.(false);
+    }
+    onClose();
+  }, [isPinned, onPin, onClose]);
+  const {
+    input,
+    messages,
+    isLoadingSuggestions,
+    isSending,
+    isStreaming,
+    suggestedPrompts,
+    contextChunks,
+    error,
+    setInput,
+    toggleChunk,
+    toggleAllChunks,
+    selectSuggestion,
+    sendMessage,
+    clearMessages,
+    config: mergedConfig
+  } = useQuickChat(targetElement, containerElement, config);
+  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 = useMemo(
+    () => contextChunks.filter((c) => c.included).length,
+    [contextChunks]
+  );
+  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 && /* @__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"
+                ]
+              }
+            )
+          ] }),
+          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 })
+        ]
+      }
+    ),
+    /* @__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 useMemo2, useState as useState3 } from "react";
 import { estimateTotalSize, formatBytes } from "@ewjdev/anyclick-core";
 import {
   AlertCircleIcon,
@@ -516,8 +1861,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 +1870,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 = useMemo2(() => {
     if (!screenshots) return [];
     const allTabs = [
       {
@@ -554,29 +1899,29 @@ var ScreenshotPreview = React.memo(function ScreenshotPreview2({
     ];
     return allTabs.filter((tab) => tab.data || tab.error);
   }, [screenshots]);
-  const totalSize = useMemo(
+  const totalSize = useMemo2(
     () => 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 +1929,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 +1942,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 +1952,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 +1961,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 +1988,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 +1996,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 +2029,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 +2044,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 +2059,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 +2075,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 +2176,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 +2224,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 +2256,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 +2270,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 +2309,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 +2344,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 +2373,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 +2386,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 +2397,7 @@ var CommentForm = React2.memo(function CommentForm2({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -1100,26 +2445,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 +2482,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 +2499,7 @@ function ContextMenu({
       setIsCapturing(false);
     }
   }, [containerElement, mergedScreenshotConfig, showPreview, targetElement]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible) {
       setSelectedType(null);
       setCurrentView("menu");
@@ -1159,7 +2513,7 @@ function ContextMenu({
       dragStartRef.current = null;
     }
   }, [visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (visible && targetElement) {
       clearHighlights();
       applyHighlights(targetElement, highlightConfig);
@@ -1170,7 +2524,7 @@ function ContextMenu({
       clearHighlights();
     };
   }, [highlightConfig, targetElement, visible]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!visible) {
       return;
     }
@@ -1189,13 +2543,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 +2573,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 +2600,7 @@ function ContextMenu({
       };
     }
   }, [isDragging, positionMode, visible]);
-  const handleDragStart = useCallback(
+  const handleDragStart = useCallback3(
     (event) => {
       if (positionMode !== "dynamic") return;
       event.preventDefault();
@@ -1255,7 +2609,8 @@ function ContextMenu({
     },
     [positionMode]
   );
-  useEffect(() => {
+  const [initialChatInput, setInitialChatInput] = useState4("");
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         if (currentView === "screenshot-preview") {
@@ -1264,19 +2619,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 +2667,6 @@ function ContextMenu({
       menuElement.removeEventListener("touchmove", preventTouchDefault);
     };
   }, [visible]);
-  if (!visible || !targetElement) {
-    return null;
-  }
   const handleItemClick = (item) => {
     if (item.status === "comingSoon") {
       return;
@@ -1364,85 +2735,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
@@ -1626,7 +3078,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 +3101,7 @@ function AnyclickProvider({
   metadata,
   onSubmitError,
   onSubmitSuccess,
+  quickChatConfig,
   scoped = false,
   screenshotConfig,
   stripAttributes,
@@ -1657,18 +3110,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 +3150,7 @@ function AnyclickProvider({
     updateProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
-  const actualDepth = useMemo2(() => {
+  const actualDepth = useMemo3(() => {
     if (!parentContext) return 0;
     let d = 0;
     let currentId = parentId;
@@ -1711,7 +3164,7 @@ function AnyclickProvider({
   }, [parentContext, parentId]);
   const isDisabledByTheme = theme === null || theme?.disabled === true;
   const effectiveDisabled = disabled || isDisabledByTheme;
-  const localTheme = useMemo2(() => {
+  const localTheme = useMemo3(() => {
     if (theme === null) {
       return { disabled: true };
     }
@@ -1726,7 +3179,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 +3233,7 @@ function AnyclickProvider({
     scoped,
     unregisterProvider
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     updateProvider(providerId, {
       disabled: effectiveDisabled,
       onContextMenu: handleContextMenu,
@@ -1793,7 +3246,7 @@ function AnyclickProvider({
     providerId,
     updateProvider
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (isDisabledByAncestor(providerId)) {
       return;
     }
@@ -1841,7 +3294,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 +3315,7 @@ function AnyclickProvider({
     },
     [metadata]
   );
-  const openMenu = useCallback2(
+  const openMenu = useCallback4(
     (element, position) => {
       setTargetElement(element);
       const mergedTheme2 = getMergedTheme(providerId);
@@ -1876,13 +3329,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 +3344,7 @@ function AnyclickProvider({
     [submitAnyclick, targetElement]
   );
   const inheritedTheme = getMergedTheme(providerId);
-  const mergedTheme = useMemo2(
+  const mergedTheme = useMemo3(
     () => ({
       ...inheritedTheme,
       ...localTheme,
@@ -1914,7 +3367,7 @@ function AnyclickProvider({
   const effectiveMenuClassName = mergedTheme.menuClassName ?? menuClassName;
   const effectiveHighlightConfig = mergedTheme.highlightConfig ?? highlightConfig;
   const effectiveScreenshotConfig = mergedTheme.screenshotConfig ?? screenshotConfig;
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({
       closeMenu,
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
@@ -1937,7 +3390,7 @@ function AnyclickProvider({
       submitAnyclick
     ]
   );
-  const content = scoped ? /* @__PURE__ */ jsx3(
+  const content = scoped ? /* @__PURE__ */ jsx4(
     "div",
     {
       ref: setContainerRef,
@@ -1946,9 +3399,9 @@ function AnyclickProvider({
       children
     }
   ) : children;
-  return /* @__PURE__ */ jsxs3(AnyclickContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs4(AnyclickContext.Provider, { value: contextValue, children: [
     content,
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       ContextMenu,
       {
         className: effectiveMenuClassName,
@@ -1960,6 +3413,7 @@ function AnyclickProvider({
         onClose: closeMenu,
         onSelect: handleMenuSelect,
         position: menuPosition,
+        quickChatConfig,
         screenshotConfig: effectiveScreenshotConfig,
         style: effectiveMenuStyle,
         targetElement,
@@ -1971,7 +3425,7 @@ function AnyclickProvider({
 var FeedbackProvider = AnyclickProvider;
 
 // src/FunModeBridge.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef5 } from "react";
 import {
   usePointer
 } from "@ewjdev/anyclick-pointer";
@@ -2020,9 +3474,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 = useMemo4(() => {
     return (el) => {
       if (!el) return null;
       const providers = providerStore.findProvidersForElement(el);
@@ -2034,7 +3488,7 @@ function FunModeBridge() {
       return null;
     };
   }, [providerStore]);
-  useEffect3(() => {
+  useEffect5(() => {
     const handleMove = (event) => {
       const el = document.elementFromPoint(event.clientX, event.clientY);
       const provider = findActiveFunProvider(el);
@@ -2069,15 +3523,15 @@ function FunModeBridge() {
 }
 
 // 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 useMemo5, 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 +3633,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 jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_COMPACT_CONFIG = {
   scale: 0.5,
   fonts: {
@@ -2241,8 +3695,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 +3714,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 +3736,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 +3745,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 +3760,7 @@ function InspectSimple({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [visible, onClose]);
-  const identityLabel = useMemo4(() => {
+  const identityLabel = useMemo5(() => {
     if (!info) return "Select an element";
     const classes = info.classNames[0] ? `.${info.classNames[0]}` : "";
     const id = info.id ? `#${info.id}` : "";
@@ -2392,8 +3846,8 @@ function InspectSimple({
     overflow: "hidden",
     ...style
   };
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -2408,14 +3862,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 +3881,7 @@ function InspectSimple({
                 borderBottom: "1px solid #1e293b"
               },
               children: [
-                isMobile && /* @__PURE__ */ jsx4(
+                isMobile && /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {
@@ -2442,8 +3896,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__ */ jsx5(
                     "span",
                     {
                       style: {
@@ -2458,31 +3912,31 @@ function InspectSimple({
                       children: identityLabel
                     }
                   ),
-                  sourceLocation && /* @__PURE__ */ jsx4(
+                  sourceLocation && /* @__PURE__ */ jsx5(
                     "button",
                     {
                       type: "button",
                       onClick: handleOpenIDE,
                       title: formatSourceLocation(sourceLocation),
                       style: iconBtnStyle,
-                      children: /* @__PURE__ */ jsx4(ExternalLink, { size: 14 })
+                      children: /* @__PURE__ */ jsx5(ExternalLink2, { size: 14 })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     onClick: onClose,
                     style: iconBtnStyle,
                     "aria-label": "Close inspector",
-                    children: /* @__PURE__ */ jsx4(X, { size: 16 })
+                    children: /* @__PURE__ */ jsx5(X2, { size: 16 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
@@ -2492,7 +3946,7 @@ function InspectSimple({
                 gap: 8
               },
               children: [
-                info?.selector && /* @__PURE__ */ jsx4(
+                info?.selector && /* @__PURE__ */ jsx5(
                   "code",
                   {
                     style: {
@@ -2507,7 +3961,7 @@ function InspectSimple({
                     children: info.selector
                   }
                 ),
-                status && /* @__PURE__ */ jsx4(
+                status && /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {
@@ -2519,7 +3973,7 @@ function InspectSimple({
                     children: status
                   }
                 ),
-                /* @__PURE__ */ jsxs4(
+                /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     style: {
@@ -2528,7 +3982,7 @@ function InspectSimple({
                       gap: 6
                     },
                     children: [
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2536,10 +3990,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy CSS selector",
                           "aria-label": "Copy CSS selector",
-                          children: /* @__PURE__ */ jsx4(Copy, { size: 15 })
+                          children: /* @__PURE__ */ jsx5(Copy2, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2547,10 +4001,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy text content",
                           "aria-label": "Copy text content",
-                          children: /* @__PURE__ */ jsx4(FileText, { size: 15 })
+                          children: /* @__PURE__ */ jsx5(FileText, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2558,10 +4012,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy HTML markup",
                           "aria-label": "Copy HTML markup",
-                          children: /* @__PURE__ */ jsx4(Code, { size: 15 })
+                          children: /* @__PURE__ */ jsx5(Code, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2573,7 +4027,7 @@ function InspectSimple({
                           disabled: saving,
                           title: "Save screenshot",
                           "aria-label": "Save screenshot",
-                          children: /* @__PURE__ */ jsx4(Camera, { size: 15 })
+                          children: /* @__PURE__ */ jsx5(Camera, { size: 15 })
                         }
                       )
                     ]
@@ -2616,7 +4070,7 @@ var iconActionStyle = {
 };
 
 // src/InspectDialog/InspectDialogManager.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var INSPECT_DIALOG_EVENT = "anyclick:inspect";
 function openInspectDialog(targetElement) {
   if (typeof window === "undefined") return;
@@ -2639,16 +4093,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 +4115,7 @@ function InspectDialogManager({
       window.removeEventListener(INSPECT_DIALOG_EVENT, handleInspectEvent);
     };
   }, []);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     InspectSimple,
     {
       visible,
@@ -2723,6 +4177,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 +4460,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 +4655,7 @@ import {
 } from "@ewjdev/anyclick-core";
 
 // src/AnyclickLogo.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function AnyclickLogo({
   size = 64,
   borderWidth = 2,
@@ -3033,7 +4667,7 @@ function AnyclickLogo({
 }) {
   const cursorSize = size * 0.45;
   const cursorStroke = borderWidth;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     {
       width: size,
@@ -3047,7 +4681,7 @@ function AnyclickLogo({
       role: onClick ? "button" : "img",
       "aria-label": "Anyclick Logo",
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "circle",
           {
             cx: size / 2,
@@ -3058,11 +4692,11 @@ function AnyclickLogo({
             strokeWidth: borderWidth
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "g",
           {
             transform: `translate(${(size - cursorSize) / 2}, ${(size - cursorSize) / 2})`,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               "path",
               {
                 d: `
@@ -3095,7 +4729,7 @@ import {
   getAccessibilityInfo,
   getBoxModelInfo,
   getAttributes,
-  getElementInspectInfo as getElementInspectInfo2,
+  getElementInspectInfo as getElementInspectInfo3,
   formatStylesAsCSS,
   formatBoxModel,
   CURATED_STYLE_PROPERTIES,
@@ -3109,6 +4743,7 @@ export {
   CURATED_STYLE_PROPERTIES,
   ContextMenu,
   DEFAULT_COMPACT_CONFIG,
+  DEFAULT_QUICK_CHAT_CONFIG,
   DEFAULT_SCREENSHOT_CONFIG2 as DEFAULT_SCREENSHOT_CONFIG,
   DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext,
@@ -3117,6 +4752,7 @@ export {
   INSPECT_DIALOG_EVENT,
   InspectDialogManager,
   InspectSimple,
+  QuickChat,
   ScreenshotPreview,
   applyHighlights,
   buildIDEUrl,
@@ -3125,9 +4761,13 @@ export {
   clearHighlights,
   createIDEOpener,
   createPresetMenu,
+  createT3ChatMenuItem,
+  createUploadScreenshotMenuItem,
+  createUploadThingMenuItem,
   darkMenuStyles,
   defaultContainerSelectors,
   defaultHighlightColors,
+  detectImageElement,
   detectPreferredIDE,
   dispatchContextMenuEvent,
   estimateTotalSize2 as estimateTotalSize,
@@ -3144,8 +4784,10 @@ export {
   getBadgeStyle,
   getBoxModelInfo,
   getComputedStyles,
-  getElementInspectInfo2 as getElementInspectInfo,
+  getElementInspectInfo3 as getElementInspectInfo,
+  getSelectedText,
   getSourceLocationFromElement,
+  hasTextSelection,
   highlightContainer,
   highlightTarget,
   isIDEProtocolSupported,
@@ -3156,8 +4798,11 @@ export {
   openInIDE,
   openInspectDialog,
   presetDefaults,
+  quickChatKeyframes,
+  quickChatStyles,
   useAnyclick,
   useFeedback,
-  useProviderStore
+  useProviderStore,
+  useQuickChat
 };
 //# sourceMappingURL=index.mjs.map