@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/dist/Chat/ChatMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA2FlB;yBAxGe,WAAW"}
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA4FD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA+FlB;yBA5Ge,WAAW"}

package/dist/Chat/ChatMessage.js

@@ -16,6 +16,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
+ * - /apps/storybook/stories/ChatMessage.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/ChatMessage/ (block examples)
  */
 import { useMemo, useId } from 'react';
@@ -23,7 +24,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { ChatMessageContext, useChatListContext } from "./ChatContext.js";
-import { mergeProps } from "../utils/index.js";
+import { isRenderable, mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -155,18 +156,23 @@ export function ChatMessage({
   const columnAlignment = sender === 'system' ? styles.contentColumnSystem : sender === 'user' ? styles.contentColumnUser : styles.contentColumnAssistant;
   const childrenAlignment = sender === 'system' ? styles.childrenSystem : sender === 'user' ? styles.childrenUser : styles.childrenAssistant;
   const isSystem = sender === 'system';
-  const hasAvatar = avatar != null && !isSystem;
-  const hasName = name != null && !isSystem;
+  const hasAvatar = !isSystem && isRenderable(avatar);
+  const hasName = !isSystem && isRenderable(name);
+  const hasMetadata = !isSystem && isRenderable(metadata);
   const nameId = useId();
   return /*#__PURE__*/_jsx(ChatMessageContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsxs("article", {
       ...rest,
       ref: ref,
-      "data-testid": testId,
-      "aria-label": !hasName ? t('@astryx.chatMessage.messageFrom', {
+      "data-testid": testId
+      // The visible name labels the article. When it renders no text, the
+      // label reference resolves to nothing and the accessible name falls
+      // back to aria-label (accessible name computation 1.2, step 2B).
+      ,
+      "aria-label": t('@astryx.chatMessage.messageFrom', {
         sender
-      }) : undefined,
+      }),
       "aria-labelledby": hasName ? nameId : undefined,
       ...mergeProps(themeProps('chat-message', {
         sender,
@@ -174,7 +180,7 @@ export function ChatMessage({
       }), stylex.props(styles.root, rootAlignment, hasAvatar && rootGap, xstyle), className, styleProp),
       children: [hasAvatar && /*#__PURE__*/_jsx("div", {
         ...{
-          className: "x2lah0s x5du68j"
+          className: "xjl7jj x2lah0s x5du68j"
         },
         children: avatar
       }), /*#__PURE__*/_jsxs("div", {
@@ -182,13 +188,16 @@ export function ChatMessage({
         children: [hasName && /*#__PURE__*/_jsx("div", {
           id: nameId,
           ...{
-            className: "x141an7d x2mo6ok xv1l7n4 x1ltkj2j x14cgwvg"
+            className: "xjl7jj x141an7d x2mo6ok xv1l7n4 x1ltkj2j x14cgwvg"
           },
           children: name
         }), /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.childrenWrap, childrenAlignment, childrenGap),
           children: children
-        }), metadata != null && !isSystem && /*#__PURE__*/_jsx("div", {
+        }), hasMetadata && /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "xjl7jj"
+          },
           children: metadata
         })]
       })]

package/dist/Chat/useTriggerMenu.d.ts

@@ -6,7 +6,9 @@
  *
  * Detects trigger characters (@ / etc.) typed inside a contentEditable,
  * opens a popover at the cursor position with filtered items, handles
- * keyboard navigation, and inserts tokens or text on selection.
+ * keyboard navigation, and inserts tokens or text on selection. Triggers
+ * opt into multi-word queries with hasMultiWordQuery; results apply only
+ * while their query is current (component:ChatComposerInput FR10–FR16).
  *
  * Reuses SearchSource from Typeahead for async/sync search with
  * cancel() support and debounce.
@@ -25,6 +27,11 @@ export interface TriggerMenuState {
     items: SearchableItem[];
     highlightedIndex: number;
     isLoading: boolean;
+    /**
+     * The last settled results were an unmatched multi-word query, so the menu
+     * is closed. It stays closed while a newer search for the same query runs.
+     */
+    isHidden: boolean;
 }
 export interface UseTriggerMenuOptions {
     triggers?: ChatComposerTrigger[];
@@ -42,7 +49,7 @@ export interface UseTriggerMenuReturn {
     state: TriggerMenuState;
     /** Call on every input event to check for trigger activation */
     handleInput: () => void;
-    /** Call on keydown \u2014 returns true if the event was consumed */
+    /** Call on keydown — returns true if the event was consumed */
     handleKeyDown: (e: React.KeyboardEvent) => boolean;
     /** Render the trigger menu popover */
     renderMenu: () => ReactNode;

package/dist/Chat/useTriggerMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTriggerMenu.d.ts","sourceRoot":"","sources":["../../src/Chat/useTriggerMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGvD,OAAO,KAAK,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAMhF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,gEAAgE;IAChE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oEAAoE;IACpE,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC;IACnD,sCAAsC;IACtC,UAAU,EAAE,MAAM,SAAS,CAAC;IAC5B,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;;;OAKG;IACH,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,SAAS,CAAC;KAC7B,CAAC;CACH;AA+JD,wBAAgB,cAAc,CAC5B,OAAO,EAAE,qBAAqB,GAC7B,oBAAoB,CA0dtB"}
+{"version":3,"file":"useTriggerMenu.d.ts","sourceRoot":"","sources":["../../src/Chat/useTriggerMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGvD,OAAO,KAAK,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAMhF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,gEAAgE;IAChE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,+DAA+D;IAC/D,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC;IACnD,sCAAsC;IACtC,UAAU,EAAE,MAAM,SAAS,CAAC;IAC5B,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;;;OAKG;IACH,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,SAAS,CAAC;KAC7B,CAAC;CACH;AAoOD,wBAAgB,cAAc,CAC5B,OAAO,EAAE,qBAAqB,GAC7B,oBAAoB,CAsnBtB"}

package/dist/Chat/useTriggerMenu.js

@@ -10,7 +10,9 @@
  *
  * Detects trigger characters (@ / etc.) typed inside a contentEditable,
  * opens a popover at the cursor position with filtered items, handles
- * keyboard navigation, and inserts tokens or text on selection.
+ * keyboard navigation, and inserts tokens or text on selection. Triggers
+ * opt into multi-word queries with hasMultiWordQuery; results apply only
+ * while their query is current (component:ChatComposerInput FR10–FR16).
  *
  * Reuses SearchSource from Typeahead for async/sync search with
  * cancel() support and debounce.
@@ -25,7 +27,7 @@ import { usePopover } from "../Popover/usePopover.js";
 import { useHighlightedOptionScroll } from "../hooks/useHighlightedOptionScroll.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
-import { mergeProps, groupItems } from "../utils/index.js";
+import { mergeProps, groupItems, isImeKeyEvent } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -48,6 +50,15 @@ const styles = {
 // Helpers
 // =============================================================================
 
+/** The text node holding a collapsed caret inside `editable`, if any. */
+function getCaretTextNode(editable) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return null;
+  }
+  const node = selection.getRangeAt(0).startContainer;
+  return node.nodeType === Node.TEXT_NODE && editable.contains(node) ? node : null;
+}
 function getTextBeforeCursor(editable) {
   const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) {
@@ -66,27 +77,73 @@ function getTextBeforeCursor(editable) {
   }
   return null;
 }
+const MAX_MULTI_WORD_QUERY_LENGTH = 64;
+
+/**
+ * An unmatched multi-word query hides the menu instead of covering prose with
+ * an empty panel, unless the trigger supplies its own empty message.
+ */
+function isUnmatchedMultiWordQuery(trigger, items, isLoading) {
+  return trigger?.hasMultiWordQuery === true &&
+  // `null` means "not given", exactly as `undefined` does.
+  trigger.emptySearchText == null && items.length === 0 && !isLoading;
+}
+function isTriggerBoundary(char) {
+  return char === null || char === ' ' || char === '\t' || char === '\n';
+}
+
+/**
+ * Finds the trigger query the caret is in (component:ChatComposerInput FR10,
+ * FR11). A trigger character activates at the start of the text or after a
+ * space, tab, or line break. A single-token query ends at whitespace. A
+ * multi-word query ends at a line break, past the length bound, or where the
+ * same trigger's character starts a new query; another trigger's character
+ * inside it is ordinary text.
+ */
 function findActiveTrigger(textBeforeCursor, triggers) {
-  for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+  let active = null;
+  for (let i = 0; i < textBeforeCursor.length; i++) {
     const char = textBeforeCursor[i];
-    if (char === ' ' || char === '\n') {
-      return null;
+    if (char === '\n') {
+      active = null;
+      continue;
     }
-    for (const trigger of triggers) {
-      if (char === trigger.character) {
-        const prevChar = i > 0 ? textBeforeCursor[i - 1] : null;
-        if (prevChar === null || prevChar === ' ' || prevChar === '\n') {
-          const query = textBeforeCursor.slice(i + 1);
-          return {
-            trigger,
-            query,
-            triggerStart: i
-          };
-        }
+    if (active && !active.trigger.hasMultiWordQuery) {
+      if (char === ' ' || char === '\t') {
+        active = null;
       }
+      continue;
+    }
+    if (active && i - active.triggerStart > MAX_MULTI_WORD_QUERY_LENGTH) {
+      active = null;
+    }
+    if (!isTriggerBoundary(i > 0 ? textBeforeCursor[i - 1] : null)) {
+      continue;
+    }
+    const trigger = triggers.find(t => t.character === char);
+    if (!trigger) {
+      continue;
     }
+    if (active && trigger.character !== active.trigger.character) {
+      continue;
+    }
+    active = {
+      trigger,
+      triggerStart: i
+    };
   }
-  return null;
+  if (!active) {
+    return null;
+  }
+  const query = textBeforeCursor.slice(active.triggerStart + 1);
+  if (active.trigger.hasMultiWordQuery && query.length > MAX_MULTI_WORD_QUERY_LENGTH) {
+    return null;
+  }
+  return {
+    trigger: active.trigger,
+    query,
+    triggerStart: active.triggerStart
+  };
 }
 function deleteTriggerText(editable, triggerStart) {
   const selection = window.getSelection();
@@ -131,11 +188,17 @@ export function useTriggerMenu(options) {
     query: '',
     items: [],
     highlightedIndex: 0,
-    isLoading: false
+    isLoading: false,
+    isHidden: false
   });
   const triggerStartRef = useRef(-1);
   const searchTimeoutRef = useRef(null);
+  const searchRequestIdRef = useRef(0);
+  const dismissedRef = useRef(null);
   const anchorSpanRef = useRef(null);
+  // True while the popover is closed only because the query is unmatched; the
+  // trigger query itself is still active.
+  const isMenuSuppressedRef = useRef(false);
   const removeAnchorSpan = useCallback(() => {
     if (anchorSpanRef.current) {
       anchorSpanRef.current.remove();
@@ -144,6 +207,10 @@ export function useTriggerMenu(options) {
   }, []);
   const popover = usePopover({
     onHide: useCallback(() => {
+      if (isMenuSuppressedRef.current) {
+        return;
+      }
+      searchRequestIdRef.current++;
       removeAnchorSpan();
       setState(prev => ({
         ...prev,
@@ -152,7 +219,8 @@ export function useTriggerMenu(options) {
         query: '',
         items: [],
         highlightedIndex: 0,
-        isLoading: false
+        isLoading: false,
+        isHidden: false
       }));
     }, [removeAnchorSpan]),
     hasLightDismiss: true,
@@ -162,6 +230,10 @@ export function useTriggerMenu(options) {
     // the contenteditable composer, so a modal dialog wrapper is incorrect.
     role: 'none'
   });
+  const {
+    show: showPopover,
+    hide: hidePopover
+  } = popover;
 
   // Cleanup on unmount
   useEffect(() => {
@@ -177,14 +249,29 @@ export function useTriggerMenu(options) {
       clearTimeout(searchTimeoutRef.current);
       searchTimeoutRef.current = null;
     }
+    searchRequestIdRef.current++;
     // Cancel any in-flight search on the active trigger's searchSource
     const trigger = state.activeTrigger;
     if (trigger?.searchSource) {
       trigger.searchSource.cancel?.();
     }
     removeAnchorSpan();
+    isMenuSuppressedRef.current = false;
+    // Ending the query also forgets an Escape on it; a send or clear must not
+    // leave the next message's mention at the same offset suppressed.
+    dismissedRef.current = null;
     popover.hide();
     triggerStartRef.current = -1;
+    setState(prev => ({
+      ...prev,
+      isActive: false,
+      activeTrigger: null,
+      query: '',
+      items: [],
+      highlightedIndex: 0,
+      isLoading: false,
+      isHidden: false
+    }));
   }, [popover, state.activeTrigger, removeAnchorSpan]);
 
   // Anchor the popover to the cursor position (not the entire input).
@@ -232,9 +319,46 @@ export function useTriggerMenu(options) {
       clearTimeout(searchTimeoutRef.current);
       searchTimeoutRef.current = null;
     }
+    const requestId = ++searchRequestIdRef.current;
+    // A result applies only while its request is the latest one and the
+    // caret is still inside the same trigger query. Submitting or clearing
+    // the editor ends the query without an input event, so check the DOM.
+    const isCurrent = () => {
+      if (requestId !== searchRequestIdRef.current) {
+        return false;
+      }
+      const editable = editableRef.current;
+      const textBefore = editable ? getTextBeforeCursor(editable) : null;
+      const found = textBefore === null || !triggers ? null : findActiveTrigger(textBefore, triggers);
+      if (found?.trigger.character !== trigger.character || found.triggerStart !== triggerStartRef.current) {
+        reset();
+        return false;
+      }
+      return true;
+    };
+    const applyResults = items => {
+      const isHidden = isUnmatchedMultiWordQuery(trigger, items, false);
+      setState(prev => ({
+        ...prev,
+        items,
+        highlightedIndex: items.length > 0 ? 0 : -1,
+        isLoading: false,
+        isHidden
+      }));
+      // A hidden menu closes its popover, which also releases the popover's
+      // Escape and light-dismiss handling; matches reopen it at the caret.
+      if (isHidden && !isMenuSuppressedRef.current) {
+        isMenuSuppressedRef.current = true;
+        hidePopover();
+      } else if (!isHidden && isMenuSuppressedRef.current) {
+        isMenuSuppressedRef.current = false;
+        setAnchor();
+        showPopover();
+      }
+    };
     const doSearch = () => {
       if (trigger.searchSource) {
-        // Use SearchSource \u2014 cancel previous, then search
+        // Use SearchSource — cancel previous, then search
         trigger.searchSource.cancel?.();
         setState(prev => ({
           ...prev,
@@ -242,19 +366,15 @@ export function useTriggerMenu(options) {
         }));
         const result = trigger.searchSource.search(query);
         Promise.resolve(result).then(items => {
-          setState(prev => ({
-            ...prev,
-            items,
-            highlightedIndex: items.length > 0 ? 0 : -1,
-            isLoading: false
-          }));
+          if (!isCurrent()) {
+            return;
+          }
+          applyResults(items);
         }, () => {
-          setState(prev => ({
-            ...prev,
-            items: [],
-            highlightedIndex: -1,
-            isLoading: false
-          }));
+          if (!isCurrent()) {
+            return;
+          }
+          applyResults([]);
         });
       }
     };
@@ -274,7 +394,7 @@ export function useTriggerMenu(options) {
         doSearch();
       }
     }
-  }, [debounceMs]);
+  }, [debounceMs, editableRef, triggers, reset, setAnchor, hidePopover, showPopover]);
   const selectItem = useCallback(item => {
     const trigger = state.activeTrigger;
     if (!trigger) {
@@ -309,6 +429,7 @@ export function useTriggerMenu(options) {
     }
     const textBefore = getTextBeforeCursor(editable);
     if (textBefore === null) {
+      dismissedRef.current = null;
       if (state.isActive) {
         reset();
       }
@@ -316,6 +437,7 @@ export function useTriggerMenu(options) {
     }
     const found = findActiveTrigger(textBefore, triggers);
     if (!found) {
+      dismissedRef.current = null;
       if (state.isActive) {
         reset();
       }
@@ -326,14 +448,27 @@ export function useTriggerMenu(options) {
       query,
       triggerStart
     } = found;
-    if (!state.isActive || state.activeTrigger !== trigger) {
+
+    // After Escape, keep the menu hidden while that same query keeps growing
+    const dismissed = dismissedRef.current;
+    if (dismissed && dismissed.character === trigger.character && dismissed.triggerStart === triggerStart && dismissed.textNode !== null && dismissed.textNode.isConnected && dismissed.textNode === getCaretTextNode(editable)) {
+      if (query.startsWith(dismissed.dismissedQuery)) {
+        return;
+      }
+      dismissedRef.current = null;
+    } else {
+      dismissedRef.current = null;
+    }
+    if (!state.isActive || state.activeTrigger?.character !== trigger.character || triggerStartRef.current !== triggerStart) {
       triggerStartRef.current = triggerStart;
+      isMenuSuppressedRef.current = false;
       setState(prev => ({
         ...prev,
         isActive: true,
         activeTrigger: trigger,
         query,
-        highlightedIndex: 0
+        highlightedIndex: 0,
+        isHidden: false
       }));
       setAnchor();
       searchItems(trigger, query);
@@ -341,13 +476,50 @@ export function useTriggerMenu(options) {
     } else if (state.query !== query) {
       setState(prev => ({
         ...prev,
-        query
+        query,
+        activeTrigger: trigger
       }));
       searchItems(trigger, query);
     }
   }, [triggers, editableRef, state.isActive, state.activeTrigger, state.query, reset, setAnchor, searchItems, popover]);
+  const isMenuVisible = state.isActive && !state.isHidden;
   const handleKeyDown = useCallback(e => {
-    if (!state.isActive || !popover.isOpen) {
+    // Never intercept IME composition keystrokes (e.g. Enter committing candidates)
+    if (isImeKeyEvent(e.nativeEvent)) {
+      return false;
+    }
+
+    // A hidden menu consumes nothing: arrows move the caret, Enter submits,
+    // and Escape reaches the surrounding surface.
+    if (!isMenuVisible) {
+      return false;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      const editable = editableRef.current;
+      const dismissed = state.activeTrigger ? {
+        character: state.activeTrigger.character,
+        triggerStart: triggerStartRef.current,
+        dismissedQuery: state.query,
+        textNode: editable ? getCaretTextNode(editable) : null
+      } : null;
+      reset();
+      // Remembered after reset, which clears it: the menu stays hidden while
+      // this same query keeps growing.
+      dismissedRef.current = dismissed;
+      return true;
+    }
+
+    // A visible menu keeps the arrows even when it has nothing to pick (rows
+    // still loading, or the empty message), so they never recall history
+    // under an open panel. Enter and Tab pick only a settled row; otherwise
+    // they keep their editor meaning, so Enter sends the message as typed.
+    const hasPickableRows = !state.isLoading && state.items.length > 0;
+    if (!hasPickableRows && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
+      return true;
+    }
+    if (!hasPickableRows) {
       return false;
     }
     switch (e.key) {
@@ -379,16 +551,10 @@ export function useTriggerMenu(options) {
           }
           return false;
         }
-      case 'Escape':
-        {
-          e.preventDefault();
-          reset();
-          return true;
-        }
       default:
         return false;
     }
-  }, [state.isActive, state.highlightedIndex, state.items, popover.isOpen, selectItem, reset]);
+  }, [isMenuVisible, editableRef, state.activeTrigger, state.query, state.isLoading, state.highlightedIndex, state.items, selectItem, reset]);
   const getItemId = useCallback(index => `${listboxId}-option-${index}`, [listboxId]);
 
   // Keep the highlighted option visible during keyboard navigation; hover
@@ -416,7 +582,7 @@ export function useTriggerMenu(options) {
   const ariaProps = !hasTriggers ? {
     role: 'textbox',
     'aria-multiline': 'true'
-  } : state.isActive && popover.isOpen ? {
+  } : isMenuVisible ? {
     role: 'combobox',
     'aria-expanded': true,
     'aria-controls': listboxId,
@@ -428,9 +594,15 @@ export function useTriggerMenu(options) {
     'aria-haspopup': 'listbox'
   };
   const renderMenu = useCallback(() => {
-    const trigger = state.activeTrigger;
-    const emptyText = trigger?.emptySearchText ?? 'No results';
-    const loadingText = trigger?.loadingText ?? 'Searching\u2026';
+    const activeTrigger = state.activeTrigger;
+    if (!activeTrigger) {
+      return null;
+    }
+    if (state.isHidden) {
+      return null;
+    }
+    const emptyText = activeTrigger.emptySearchText ?? 'No results';
+    const loadingText = activeTrigger.loadingText ?? 'Searching\u2026';
     let listContent;
     if (state.isLoading) {
       listContent = /*#__PURE__*/_jsx("div", {
@@ -471,7 +643,7 @@ export function useTriggerMenu(options) {
                 className: "x9f619 x78zum5 x6s0dn4 xh8yej3 xlsj2fj xh6dtrn x1ypdohk x16khyan x1a2a7pz xc342km xng3xce x1yc453h x9ynric xjm74w1 xw6l6zx x1tgivj0 x1lmrjuc"
               }
             }[!!(idx === state.highlightedIndex) << 0],
-            children: trigger?.renderItem ? trigger.renderItem(item) : /*#__PURE__*/_jsx("span", {
+            children: activeTrigger.renderItem ? activeTrigger.renderItem(item) : /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x98rzlu xeuugli xb3r6kr xlyipyv xuxw1ft"
               },
@@ -498,7 +670,7 @@ export function useTriggerMenu(options) {
     return popover.render(/*#__PURE__*/_jsx("div", {
       id: listboxId,
       role: "listbox",
-      "aria-label": trigger?.menuLabel ?? t('@astryx.chatTriggerMenu.suggestions'),
+      "aria-label": activeTrigger.menuLabel ?? t('@astryx.chatTriggerMenu.suggestions'),
       ...mergeProps(themeProps('trigger-menu'), {
         className: "x9f619 x1xiyphd x1odjw0f x9epnlk xfb3i0g"
       }),

package/dist/CodeBlock/CodeBlock.d.ts

@@ -9,6 +9,15 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
     hasLanguageLabel?: boolean;
     hasLineNumbers?: boolean;
     highlightLines?: number[];
+    /**
+     * Render the code as a unified diff over `language`: lines starting with
+     * `+` are added, `-` removed, `@@` is a hunk header (a `--- `/`+++ ` pair
+     * directly before one is a file header), anything else is context; the
+     * label reads `diff` or `<language> diff`. The glyph sits in its own column and the rest of every line
+     * keeps the language's syntax highlighting. Copy still returns the exact
+     * source, glyphs included.
+     */
+    isDiff?: boolean;
     hasCopyButton?: boolean;
     onCopy?: () => void;
     isWrapped?: boolean;
@@ -58,7 +67,7 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
  * <CodeBlock code="const x = 42;" language="javascript" />
  * ```
  */
-export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
+export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, isDiff, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
 export declare namespace CodeBlock {
     var displayName: string;
 }

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AA4WxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAmPhB;yBA3Qe,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgC5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAwcxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAgSD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,MAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAmRhB;yBA5Se,SAAS"}