@plannotator/ui 0.53.1 → 0.54.0

package/components/ai/NewChatButton.tsx

@@ -0,0 +1,74 @@
+import React, { useId } from 'react';
+
+interface NewChatButtonProps {
+  onNewChat: () => void;
+  /** A question is in flight: a new chat would cut it off, so it waits. */
+  busy?: boolean;
+  /**
+   * A busy "Ask this session" answer still offers "Ask when it finishes" /
+   * "Interrupt and ask now": clearing would drop that question unasked.
+   */
+  pendingChoice?: boolean;
+  /**
+   * "Ask this session": the agent session that opened Plannotator answers, and
+   * it keeps its own memory, so the button only clears the panel. The label
+   * says so instead of promising fresh context.
+   */
+  sessionBridge?: boolean;
+}
+
+export function newChatLabels(sessionBridge: boolean): { label: string; title: string } {
+  return sessionBridge
+    ? {
+        label: 'Clear chat',
+        title: 'Clear this panel. The session that opened Plannotator still remembers earlier questions.',
+      }
+    : {
+        label: 'New chat',
+        title: 'Clear this chat and start a fresh AI session',
+      };
+}
+
+/** Why the button is unavailable right now; null when it can be used. */
+export function newChatBlockedReason(options: { busy?: boolean; pendingChoice?: boolean }): string | null {
+  if (options.busy) return 'Wait for the answer, or stop it, before starting a new chat.';
+  if (options.pendingChoice) return 'First choose "Ask when it finishes" or "Interrupt and ask now" for the waiting question.';
+  return null;
+}
+
+/**
+ * The Ask AI panel's "New chat" row (#1981). While unavailable it stays
+ * focusable (`aria-disabled`, clicks ignored) and its reason is its
+ * description, so keyboard and screen-reader users learn why.
+ */
+export const NewChatButton: React.FC<NewChatButtonProps> = ({
+  onNewChat,
+  busy = false,
+  pendingChoice = false,
+  sessionBridge = false,
+}) => {
+  const { label, title } = newChatLabels(sessionBridge);
+  const blocked = newChatBlockedReason({ busy, pendingChoice });
+  const descriptionId = useId();
+  return (
+    <div className="flex items-center justify-end px-2 pt-1.5 pb-0.5" data-ai-new-chat-row>
+      <button
+        type="button"
+        onClick={() => { if (!blocked) onNewChat(); }}
+        aria-disabled={blocked ? true : undefined}
+        aria-describedby={descriptionId}
+        title={blocked ?? title}
+        data-ai-new-chat
+        className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted aria-disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
+      >
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        {label}
+      </button>
+      <span id={descriptionId} className="sr-only" data-ai-new-chat-description>
+        {blocked ?? title}
+      </span>
+    </div>
+  );
+};

package/components/blocks/CodeBlock.tsx

@@ -54,7 +54,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave })
     >
       <button
         onClick={handleCopy}
-        className="absolute top-2 right-2 p-1.5 rounded-md bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10"
+        className="absolute top-2 right-2 p-1.5 rounded-md bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100 transition-opacity z-10"
         title={copied ? 'Copied!' : 'Copy code'}
       >
         {copied ? (

package/components/blocks/HtmlBlock.tsx

@@ -86,7 +86,13 @@ function rewriteRelativeRefs(
     // Media was already decided by the host before insertion (see
     // resolveHostMedia); only the load-failure fallback is wired here.
     root.querySelectorAll<HTMLImageElement>('img[data-host-image]').forEach((img) => {
-      const onError = () => img.replaceWith(unavailableMedia(img.ownerDocument, img.getAttribute('alt') || 'Image', IMAGE_NOT_FOUND_TITLE));
+      // The raw HTML is not React's: replacing the <img> here cannot trip React's insertBefore.
+      // The placeholder's alt text is never quoted by a text comment (annotation-exclude).
+      const onError = () => {
+        const placeholder = unavailableMedia(img.ownerDocument, img.getAttribute('alt') || 'Image', IMAGE_NOT_FOUND_TITLE);
+        placeholder.classList.add('annotation-exclude');
+        img.replaceWith(placeholder);
+      };
       img.addEventListener('error', onError);
       cleanups.push(() => img.removeEventListener('error', onError));
     });