@plannotator/ui 0.22.0

package/components/CommentPopover.tsx

@@ -0,0 +1,512 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import type { ImageAttachment } from '../types';
+import { AttachmentsButton } from './AttachmentsButton';
+import { submitHint } from '../utils/platform';
+import { useDraggable } from '../hooks/useDraggable';
+import { SparklesIcon } from './SparklesIcon';
+import { hasUnsavedCommentContent } from '../utils/commentContent';
+
+export interface CommentAskAIContext {
+  kind: 'general' | 'selection';
+  label?: string;
+  text?: string;
+  sourcePath?: string;
+}
+
+export type CommentAskAIHandler = (
+  question: string,
+  context: CommentAskAIContext,
+) => boolean | void | Promise<boolean | void>;
+
+interface CommentPopoverProps {
+  /** Element to anchor the popover near (re-reads position on scroll) */
+  anchorEl?: HTMLElement;
+  /** Static viewport rect to anchor near when no stable DOM element exists */
+  anchorRect?: DOMRect;
+  /** Truncated selected text shown in header, or empty for global */
+  contextText: string;
+  /** Whether this is a global comment */
+  isGlobal: boolean;
+  /** Pre-filled text (for type-to-comment) */
+  initialText?: string;
+  /** Called on submit with comment text and optional images */
+  onSubmit: (text: string, images?: ImageAttachment[]) => void;
+  /** Optional live draft observer for submit paths outside the popover. */
+  onDraftChange?: (text: string, images?: ImageAttachment[]) => void;
+  /** Called when popover is closed/cancelled */
+  onClose: () => void;
+  /** Opt-in: persist text + images across close/reopen, keyed by this string. Cleared on submit. */
+  draftKey?: string;
+  /** Whether image attachments are available in this comment surface. */
+  allowImages?: boolean;
+  /** Whether submitting empty text is allowed, for editors that support clearing. */
+  allowEmptySubmit?: boolean;
+  /** Optional Ask AI action. Absent by default so existing comment surfaces are unchanged. */
+  onAskAI?: CommentAskAIHandler;
+  askAIContext?: CommentAskAIContext;
+  askAIDisabled?: boolean;
+}
+
+const MAX_POPOVER_WIDTH = 384;
+const GAP = 8;
+
+// Module-level draft store: survives popover unmount so reopening the same key restores in-progress text.
+const draftStore = new Map<string, { text: string; images: ImageAttachment[] }>();
+
+/** Mirrors the latest text + images into `draftStore[draftKey]` so they outlive popover unmount. No-op without a key. */
+function useCommentDraftSync(draftKey: string | undefined, text: string, images: ImageAttachment[]) {
+  useEffect(() => {
+    if (!draftKey) return;
+    if (hasUnsavedCommentContent(text, images)) {
+      draftStore.set(draftKey, { text, images });
+    } else {
+      draftStore.delete(draftKey);
+    }
+  }, [draftKey, text, images]);
+}
+
+function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean; width: number } {
+  const spaceBelow = window.innerHeight - anchorRect.bottom;
+  const flipAbove = spaceBelow < 280;
+  const width = Math.min(MAX_POPOVER_WIDTH, window.innerWidth - 32);
+
+  const top = flipAbove
+    ? anchorRect.top - GAP
+    : anchorRect.bottom + GAP;
+
+  let left = anchorRect.left + anchorRect.width / 2 - width / 2;
+  left = Math.max(16, Math.min(left, window.innerWidth - width - 16));
+
+  return { top, left, flipAbove, width };
+}
+
+export const CommentPopover: React.FC<CommentPopoverProps> = ({
+  anchorEl,
+  anchorRect,
+  contextText,
+  isGlobal,
+  initialText = '',
+  onSubmit,
+  onDraftChange,
+  onClose,
+  draftKey,
+  allowImages = true,
+  allowEmptySubmit = false,
+  onAskAI,
+  askAIContext,
+  askAIDisabled = false,
+}) => {
+  const [mode, setMode] = useState<'popover' | 'dialog'>('popover');
+  const initialDraft = draftKey ? draftStore.get(draftKey) : undefined;
+  const [text, setText] = useState(initialDraft?.text ?? initialText);
+  const [images, setImages] = useState<ImageAttachment[]>(allowImages ? initialDraft?.images ?? [] : []);
+  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean; width: number } | null>(null);
+  // Direction of an open popover that has scrolled out of view, or null when on-screen.
+  const [offscreen, setOffscreen] = useState<'above' | 'below' | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const hasUnsavedContent = hasUnsavedCommentContent(text, allowImages ? images : []);
+  const hasUnsavedContentRef = useRef(hasUnsavedContent);
+  hasUnsavedContentRef.current = hasUnsavedContent;
+  const { dragPosition, dragHandleProps, wasDragged, reset: resetDrag } = useDraggable(popoverRef);
+
+  useEffect(() => {
+    const nextDraft = draftKey ? draftStore.get(draftKey) : undefined;
+    setText(nextDraft?.text ?? initialText);
+    setImages(allowImages ? nextDraft?.images ?? [] : []);
+  }, [draftKey, initialText, allowImages]);
+
+  useCommentDraftSync(draftKey, text, allowImages ? images : []);
+
+  useEffect(() => {
+    onDraftChange?.(text, allowImages ? images : undefined);
+  }, [allowImages, images, onDraftChange, text]);
+
+  // Reset drag when anchor changes (new annotation) or mode switches
+  useEffect(() => { resetDrag(); }, [anchorEl, anchorRect, resetDrag]);
+  useEffect(() => { if (mode === 'popover') resetDrag(); }, [mode, resetDrag]);
+
+  // Track anchor position on scroll/resize (popover mode only, not after user drag)
+  useEffect(() => {
+    if (mode !== 'popover' || wasDragged) return;
+
+    const update = () => {
+      const rect = anchorEl?.getBoundingClientRect() ?? anchorRect;
+      if (rect) setPosition(computePosition(rect));
+    };
+
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [anchorEl, anchorRect, mode, wasDragged]);
+
+  // Surface a "jump back" arrow when an open popover scrolls out of view.
+  // Re-measures whenever the popover repositions (position updates every scroll
+  // step in tracked mode) so the indicator is accurate at rest, plus on resize.
+  useEffect(() => {
+    if (mode !== 'popover') { setOffscreen(null); return; }
+    const measure = () => {
+      const el = popoverRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      if (rect.bottom < 8) setOffscreen('above');
+      else if (rect.top > window.innerHeight - 8) setOffscreen('below');
+      else setOffscreen(null);
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [position, dragPosition, mode]);
+
+  const scrollToPopover = useCallback(() => {
+    anchorEl?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }, [anchorEl]);
+
+  // Focus textarea on mount and mode changes
+  useEffect(() => {
+    const id = setTimeout(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.selectionStart = el.selectionEnd = el.value.length;
+      }
+    }, 0);
+    return () => clearTimeout(id);
+  }, [mode]);
+
+  // Click-outside for popover mode
+  useEffect(() => {
+    if (mode !== 'popover') return;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      if (popoverRef.current?.contains(target)) return;
+      // Don't close if clicking inside a child portal (AttachmentsButton, ImageAnnotator, etc.)
+      const el = target as HTMLElement;
+      if (el.closest?.('[data-popover-layer]')) return;
+      if (hasUnsavedContentRef.current) return;
+      onClose();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => document.removeEventListener('pointerdown', handlePointerDown, true);
+  }, [mode, onClose]);
+
+  const handleSubmit = useCallback(() => {
+    const canSubmitEmpty = allowEmptySubmit && initialText.trim().length > 0;
+    if (hasUnsavedContent || canSubmitEmpty) {
+      if (draftKey) draftStore.delete(draftKey);
+      onSubmit(text, allowImages && images.length > 0 ? images : undefined);
+    }
+  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent]);
+
+  const handleAskAI = useCallback(async () => {
+    const question = text.trim();
+    if (!question || !onAskAI) {
+      textareaRef.current?.focus();
+      return;
+    }
+    let accepted: boolean | void;
+    try {
+      accepted = await onAskAI(question, askAIContext ?? {
+        kind: isGlobal ? 'general' : 'selection',
+        text: contextText,
+      });
+    } catch (error) {
+      console.error('Ask AI action failed:', error);
+      textareaRef.current?.focus();
+      return;
+    }
+    if (accepted === false) {
+      textareaRef.current?.focus();
+      return;
+    }
+    if (draftKey) draftStore.delete(draftKey);
+    onDraftChange?.('', allowImages ? [] : undefined);
+    onClose();
+  }, [allowImages, askAIContext, contextText, draftKey, isGlobal, onAskAI, onClose, onDraftChange, text]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (mode === 'dialog') {
+        setMode('popover');
+      } else {
+        onClose();
+      }
+      return;
+    }
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const headerLabel = isGlobal
+    ? 'Global Comment'
+    : contextText
+      ? `"${contextText.length > 50 ? contextText.slice(0, 50) + '...' : contextText}"`
+      : 'Comment';
+
+  const canSubmit =
+    hasUnsavedContent ||
+    (allowEmptySubmit && initialText.trim().length > 0);
+  const canAskAI = !!onAskAI && !askAIDisabled && text.trim().length > 0;
+
+  if (mode === 'dialog') {
+    return createPortal(
+      <div data-comment-popover="true" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+        {/* Backdrop */}
+        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+
+        {/* Dialog card */}
+        <div
+          ref={popoverRef}
+          className="relative w-full max-w-xl bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
+          style={{
+            animation: 'comment-dialog-in 0.15s ease-out',
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <style>{`
+            @keyframes comment-dialog-in {
+              from { opacity: 0; transform: scale(0.95); }
+              to { opacity: 1; transform: scale(1); }
+            }
+          `}</style>
+
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
+            <span className="text-xs text-muted-foreground truncate max-w-[400px]">
+              {headerLabel}
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setMode('popover')}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title="Collapse"
+              >
+                <CollapseIcon />
+              </button>
+              <button
+                onClick={onClose}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                title="Close"
+              >
+                <CloseIcon />
+              </button>
+            </div>
+          </div>
+
+          {/* Textarea */}
+          <div className="px-4 py-3 flex-1">
+            <textarea
+              ref={textareaRef}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
+              className="w-full bg-transparent text-sm placeholder:text-muted-foreground resize-none focus:outline-none min-h-48 max-h-96 px-1 py-0.5"
+              style={{ fieldSizing: 'content' } as React.CSSProperties}
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between px-4 py-3 border-t border-border/50">
+            <div className="flex items-center gap-2">
+              {allowImages && (
+                <AttachmentsButton
+                  images={images}
+                  onAdd={(img) => setImages((prev) => [...prev, img])}
+                  onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+                  variant="inline"
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              {onAskAI && (
+                <button
+                  onClick={handleAskAI}
+                  disabled={!canAskAI}
+                  className="inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium rounded-md text-muted-foreground hover:text-primary hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title={canAskAI ? 'Ask AI this question' : 'Type a question to ask AI'}
+                >
+                  <SparklesIcon className="w-3 h-3" />
+                  Ask AI
+                </button>
+              )}
+              <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+              <button
+                onClick={handleSubmit}
+                disabled={!canSubmit}
+                className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+              >
+                {isGlobal ? 'Add' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  // Popover mode
+  if (!position) return null;
+
+  return createPortal(
+    <>
+      {offscreen && (
+        <button
+          type="button"
+          data-popover-layer="true"
+          onClick={scrollToPopover}
+          title="Scroll back to your open comment"
+          className={`fixed left-1/2 -translate-x-1/2 z-[101] flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-popover border border-border shadow-lg text-xs text-muted-foreground hover:text-foreground transition-colors ${offscreen === 'above' ? 'top-3' : 'bottom-3'}`}
+        >
+          {offscreen === 'above' ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          <span>Open comment</span>
+        </button>
+      )}
+      <div
+        ref={popoverRef}
+        data-comment-popover="true"
+      className="fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
+      style={dragPosition
+        ? { top: dragPosition.top, left: dragPosition.left, width: position.width }
+        : {
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
+            animation: position.flipAbove
+              ? 'comment-popover-in-above 0.15s ease-out'
+              : 'comment-popover-in 0.15s ease-out',
+          }
+      }
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <style>{`
+        @keyframes comment-popover-in {
+          from { opacity: 0; transform: translateY(-8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes comment-popover-in-above {
+          from { opacity: 0; transform: translateY(-100%) translateY(8px); }
+          to { opacity: 1; transform: translateY(-100%); }
+        }
+      `}</style>
+
+      {/* Header (draggable) */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50" {...dragHandleProps}>
+        <span className="text-xs text-muted-foreground truncate max-w-[260px]">
+          {headerLabel}
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setMode('dialog')}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title="Expand"
+          >
+            <ExpandIcon />
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            title="Close"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      </div>
+
+      {/* Textarea */}
+      <div className="px-3 py-2">
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
+          className="w-full bg-transparent text-sm placeholder:text-muted-foreground resize-none focus:outline-none max-h-64 min-h-[4.5rem] px-1 py-0.5"
+          style={{ fieldSizing: 'content' } as React.CSSProperties}
+        />
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
+        <div className="flex items-center gap-2">
+          {allowImages && (
+            <AttachmentsButton
+              images={images}
+              onAdd={(img) => setImages((prev) => [...prev, img])}
+              onRemove={(path) => setImages((prev) => prev.filter((i) => i.path !== path))}
+              variant="inline"
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {onAskAI && (
+            <button
+              onClick={handleAskAI}
+              disabled={!canAskAI}
+              className="inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium rounded-md text-muted-foreground hover:text-primary hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              title={canAskAI ? 'Ask AI this question' : 'Type a question to ask AI'}
+            >
+              <SparklesIcon className="w-3 h-3" />
+              Ask AI
+            </button>
+          )}
+          <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+          >
+            {isGlobal ? 'Add' : 'Save'}
+          </button>
+        </div>
+      </div>
+      </div>
+    </>,
+    document.body
+  );
+};
+
+// Icons
+
+const ChevronUpIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+const ExpandIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+  </svg>
+);
+
+const CollapseIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);

package/components/CompletionOverlay.tsx

@@ -0,0 +1,99 @@
+import { useAutoClose } from '../hooks/useAutoClose';
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+const CheckIcon = () => (
+  <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const ChatBubbleIcon = () => (
+  <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+    />
+  </svg>
+);
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+interface CompletionOverlayProps {
+  submitted: 'approved' | 'denied' | 'feedback' | 'exited' | null | false;
+  title: string;
+  subtitle: string;
+  agentLabel: string;
+}
+
+export function CompletionOverlay({ submitted, title, subtitle, agentLabel }: CompletionOverlayProps) {
+  const { state, enableAndStart } = useAutoClose(!!submitted);
+
+  if (!submitted) return null;
+
+  const isApproved = submitted === 'approved';
+
+  return (
+    <div className="fixed inset-0 z-[100] bg-background flex items-center justify-center">
+      <div className="text-center space-y-6 max-w-md px-8">
+        <div
+          className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center ${
+            isApproved ? 'bg-success/20 text-success' : 'bg-accent/20 text-accent'
+          }`}
+        >
+          {isApproved ? <CheckIcon /> : <ChatBubbleIcon />}
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-foreground">{title}</h2>
+          <p className="text-muted-foreground">{subtitle}</p>
+        </div>
+
+        <div className="pt-4 border-t border-border space-y-2">
+          {state.phase === 'counting' ? (
+            <>
+              <p className="text-sm text-muted-foreground">
+                This tab will close in <span className="text-foreground font-medium">{state.remaining}</span> second
+                {state.remaining !== 1 ? 's' : ''}...
+              </p>
+              <p className="text-xs text-muted-foreground/60">You can change this in Settings.</p>
+            </>
+          ) : state.phase === 'closeFailed' ? (
+            <>
+              <p className="text-sm text-muted-foreground">
+                Could not close this tab automatically. Please close it manually.
+              </p>
+              <p className="text-xs text-muted-foreground/60">
+                Auto-close works when the tab is opened by {agentLabel}.
+              </p>
+            </>
+          ) : (
+            <>
+              <p className="text-sm text-muted-foreground">
+                You can close this tab and return to <span className="text-foreground font-medium">{agentLabel}</span>.
+              </p>
+              {state.phase === 'prompt' ? (
+                <>
+                  <label className="flex items-center justify-center gap-2 cursor-pointer group">
+                    <input type="checkbox" checked={false} onChange={enableAndStart} className="accent-primary" />
+                    <span className="text-xs text-muted-foreground group-hover:text-foreground transition-colors">
+                      Auto-close this tab after 3 seconds
+                    </span>
+                  </label>
+                  <p className="text-xs text-muted-foreground/60">You can change the delay in Settings.</p>
+                </>
+              ) : (
+                <p className="text-xs text-muted-foreground/60">Your response has been sent.</p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}