@pharos-ds/core 0.1.9

package/dist/Chat/ChatComposerInput.js

@@ -0,0 +1,524 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatComposerInput.tsx
+ * @input Uses React, StyleX, useTriggerMenu, SearchSource
+ * @output Exports ChatComposerInput rich input + trigger types
+ * @position Core implementation; consumed by index.ts, ChatComposer;
+ *   forwards DOM ref and exposes editor control via handleRef
+ *
+ * ContentEditable-based rich input for the chat composer.
+ * Supports trigger menus (@ mentions, / commands) via SearchSource,
+ * inline token rendering, serialization, Enter-to-submit with
+ * IME-composition guarding and an onKeyDown seam for platform-specific
+ * key handling, message history, paste/drop file handling, and
+ * mobile-safe touch typography.
+ *
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Chat/index.ts
+ * - /apps/storybook/stories/ChatComposer.stories.tsx
+ * - /packages/cli/templates/blocks/components/ChatComposerInput/ (block examples)
+ */
+import { useRef, useState, useCallback, useEffect, useImperativeHandle } from 'react';
+import { createPortal } from 'react-dom';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { useTriggerMenu } from "./useTriggerMenu.js";
+import { useChatComposerTokens, isCustomToken } from "./useChatComposerTokens.js";
+import { ensureCaretInside, insertTextAtCursor } from "./chatComposerSelection.js";
+import { ChatPastedTextToken } from "./ChatPastedTextToken.js";
+import { useChatPasteAsToken } from "./useChatPasteAsToken.js";
+import { Badge } from "../Badge/index.js";
+import { useChatComposerContext } from "./ChatContext.js";
+import { themeProps } from "../utils/themeProps.js";
+import { useTranslator } from "../i18n/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Imperative handle exposed by ChatComposerInput via handleRef */
+
+/** Badge config for the common case \u2014 structured, simple, autocomplete-friendly */
+
+/** Custom render for the escape hatch \u2014 tooltips, hovercards, rich content */
+
+/**
+ * Token inserted into the contentEditable by a trigger menu.
+ *
+ * Two forms:
+ * - **Badge config** (recommended): `{ value, label, variant?, icon? }` \u2014
+ *   renders an Badge. Structured, themeable, autocomplete-friendly.
+ * - **Custom render**: `{ value, render }` \u2014 full control via ReactNode.
+ *   Use for tooltips, hovercards, or any content beyond a badge.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const LINE_HEIGHT_PX = 22;
+const styles = {
+  root: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kAzted: "xe0957l",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kfzvcC: "x47corl",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+/** Select all text in a contentEditable element. */
+function selectAll(el) {
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function serialize(node) {
+  let result = '';
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      result += child.textContent ?? '';
+    } else if (child instanceof HTMLElement) {
+      if (child.hasAttribute('data-pharos-token')) {
+        result += child.getAttribute('data-pharos-token-value') ?? '';
+      } else if (child.tagName === 'BR') {
+        result += '\n';
+      } else {
+        result += serialize(child);
+      }
+    }
+  }
+  return result;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function ChatComposerInput(props) {
+  const t = useTranslator();
+  const composerCtx = useChatComposerContext();
+  const hasControlledValueProp = props.value !== undefined;
+  const {
+    ref,
+    handleRef,
+    value: controlledValue = composerCtx?.value,
+    onChange: onChangeProp,
+    placeholder: placeholderFromProps,
+    maxRows = 8,
+    triggers,
+    debounceMs = 150,
+    hasHistory = true,
+    label: labelFromProps,
+    isDisabled = composerCtx?.isDisabled ?? false,
+    onPaste: onPasteProp,
+    pasteAsToken: pasteAsTokenProp,
+    onFiles,
+    onSubmit = composerCtx?.onSubmit,
+    onKeyDown: onKeyDownProp,
+    xstyle,
+    className,
+    style,
+    ...rest
+  } = props;
+  const label = labelFromProps ?? t('@pharos.chat.composerInput.label');
+  const placeholder = placeholderFromProps ?? composerCtx?.placeholder ?? t('@pharos.chat.composer.placeholder');
+  const composerOnChange = composerCtx?.onChange;
+  const onChange = useCallback(nextValue => {
+    if (hasControlledValueProp) {
+      onChangeProp?.(nextValue);
+      return;
+    }
+    composerOnChange?.(nextValue);
+    if (onChangeProp !== composerOnChange) {
+      onChangeProp?.(nextValue);
+    }
+  }, [composerOnChange, hasControlledValueProp, onChangeProp]);
+  const editableRef = useRef(null);
+  const selfRef = useRef(null);
+  const [isEmpty, setIsEmpty] = useState(true);
+  const historyRef = useRef([]);
+  const historyIndexRef = useRef(-1);
+  const currentDraftRef = useRef('');
+  // One-shot marker: when set, holds the value we expect the parent
+  // to echo back as `controlledValue` after our latest `onChange`
+  // emission. We use it to skip a single `useEffect` resync, because
+  // resyncing would (a) collapse the caret to offset 0 and (b)
+  // discard any characters the user typed between the emit and the
+  // resulting commit. Cleared on consumption — either when the echo
+  // arrives or when a non-echoing external update overwrites it — so
+  // a later external set back to the same string is never
+  // incorrectly skipped.
+  const pendingEchoValueRef = useRef(undefined);
+
+  // Stable refs for imperative handle callbacks (avoid re-creating handle on every render)
+  const insertTokenRef = useRef(() => undefined);
+  const insertTextRef = useRef(() => {});
+
+  // A single handle object shared between the forwarded ref (via
+  // `useImperativeHandle`) and `selfRef` (used by internal consumers
+  // like paste-as-token). We can't rely on `useImperativeHandle`'s
+  // factory to populate `selfRef` because React only runs that factory
+  // when a parent attaches a ref — without this, paste-as-token would
+  // silently no-op whenever `ChatComposerInput` is rendered without
+  // a forwarded ref (e.g. inside `ChatComposer`).
+  const handle = {
+    insertToken: token => insertTokenRef.current(token),
+    expandToken: id => tokens.expandToken(id),
+    insertText: text => insertTextRef.current(text),
+    focus: () => editableRef.current?.focus(),
+    getValue: () => serialize(editableRef.current ?? document.createElement('div'))
+  };
+  selfRef.current = handle;
+  useImperativeHandle(handleRef, () => handle);
+
+  // Register a focus control with the composer shell so body-click-to-focus
+  // works without the shell sniffing the input's DOM shape. Cleared on
+  // unmount so the shell falls back cleanly if the input goes away.
+  const inputControlRef = composerCtx?.inputControlRef;
+  useEffect(() => {
+    if (!inputControlRef) {
+      return;
+    }
+    inputControlRef.current = {
+      focus: () => editableRef.current?.focus()
+    };
+    return () => {
+      inputControlRef.current = null;
+    };
+  }, [inputControlRef]);
+  useEffect(() => {
+    if (controlledValue === undefined || !editableRef.current) {
+      return;
+    }
+    // Skip exactly one echo of our most recent `onChange` emission:
+    // the DOM is already authoritative for that value, and the user
+    // may have typed more characters between the emit and this
+    // effect running. Consume the marker so a later external set to
+    // the same string is still applied.
+    if (controlledValue === pendingEchoValueRef.current) {
+      pendingEchoValueRef.current = undefined;
+      return;
+    }
+    const editable = editableRef.current;
+    if (serialize(editable) !== controlledValue) {
+      // Genuine external override — invalidate any stale pending
+      // echo before we rewrite the DOM.
+      pendingEchoValueRef.current = undefined;
+      const wasFocused = document.activeElement === editable;
+      editable.textContent = controlledValue;
+      // Setting `textContent` tears down the existing text node,
+      // which collapses any Selection inside this editable to
+      // offset 0. If the user was focused (e.g. a programmatic
+      // insert from a slash-menu pick), restore the caret to the
+      // end of the new content so the next keystroke appends rather
+      // than prepends.
+      if (wasFocused) {
+        const selection = window.getSelection();
+        if (selection) {
+          const range = document.createRange();
+          range.selectNodeContents(editable);
+          range.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+      setIsEmpty(controlledValue.length === 0);
+    } else {
+      pendingEchoValueRef.current = undefined;
+    }
+  }, [controlledValue]);
+  const cleanupPortalsRef = useRef(null);
+  const emitChange = useCallback(() => {
+    if (!editableRef.current) {
+      return;
+    }
+    const text = serialize(editableRef.current);
+    // Browsers may leave a trailing <br> when all content is deleted,
+    // which serializes to "\n". Treat whitespace-only as empty.
+    const hasTokens = editableRef.current.querySelector('[data-pharos-token], [data-pharos-dictation-interim]') != null;
+    const trimmedEmpty = text.trim().length === 0 && !hasTokens;
+    const nextValue = trimmedEmpty ? '' : text;
+    pendingEchoValueRef.current = nextValue;
+    setIsEmpty(trimmedEmpty);
+    onChange?.(nextValue);
+    cleanupPortalsRef.current?.();
+  }, [onChange]);
+
+  // --- Token management (via hook) ---
+  const tokens = useChatComposerTokens({
+    editableRef,
+    onEmitChange: emitChange
+  });
+  cleanupPortalsRef.current = tokens.cleanupPortals;
+
+  // --- Paste-as-token (internal default) ---
+  const defaultPasteAsToken = useChatPasteAsToken({
+    inputRef: selfRef
+  });
+  const pasteAsToken = pasteAsTokenProp === false ? null : pasteAsTokenProp ?? defaultPasteAsToken;
+  const insertText = useCallback(text => {
+    const editable = editableRef.current;
+    if (!editable) {
+      return;
+    }
+    insertTextAtCursor(editable, text);
+  }, []);
+
+  // Keep stable refs in sync for imperative handle
+  insertTokenRef.current = tokens.insertToken;
+  insertTextRef.current = insertText;
+
+  // --- Trigger menu ---
+  const triggerMenu = useTriggerMenu({
+    triggers,
+    editableRef,
+    onInsertToken: tokens.insertToken,
+    onInsertText: insertText,
+    onEmitChange: emitChange,
+    debounceMs
+  });
+  const handleInput = useCallback(() => {
+    emitChange();
+    triggerMenu.handleInput();
+  }, [emitChange, triggerMenu]);
+  const handleKeyDown = useCallback(e => {
+    // Let trigger menu consume the event first
+    if (triggerMenu.handleKeyDown(e)) {
+      return;
+    }
+
+    // Consumer passthrough — runs before built-in Enter/history handling.
+    // A consumer can preventDefault() to fully own the keystroke.
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    // Handle Backspace near tokens — prevent browser from creating
+    // stray <br> elements or moving the cursor unexpectedly.
+    if (e.key === 'Backspace') {
+      const selection = window.getSelection();
+      if (selection && selection.isCollapsed && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const {
+          startContainer,
+          startOffset
+        } = range;
+
+        // Case 1: Cursor is in a text node right after a token.
+        // If the text node is just the trailing NBSP, remove it
+        // and place cursor after the token.
+        if (startContainer.nodeType === Node.TEXT_NODE && startOffset === 0 && startContainer.previousSibling instanceof HTMLElement && startContainer.previousSibling.hasAttribute('data-pharos-token')) {
+          // Cursor is at start of text node right after a token — let
+          // the browser handle it normally (it will select/delete the token)
+        } else if (startContainer.nodeType === Node.TEXT_NODE && startContainer.textContent === ' ' && startOffset <= 1 && startContainer.previousSibling instanceof HTMLElement && startContainer.previousSibling.hasAttribute('data-pharos-token')) {
+          // Cursor is in or after the trailing NBSP — remove the NBSP
+          // and the token in one action
+          e.preventDefault();
+          const tokenSpan = startContainer.previousSibling;
+          const parent = startContainer.parentNode;
+          if (parent) {
+            parent.removeChild(startContainer);
+            parent.removeChild(tokenSpan);
+          }
+          emitChange();
+          return;
+        }
+      }
+    }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      // Never submit mid-composition — an IME uses Enter to commit a
+      // candidate (e.g. Japanese/Chinese/Korean input), and browsers may
+      // also surface the legacy keyCode 229 for composing keystrokes.
+      if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) {
+        return;
+      }
+      e.preventDefault();
+      if (!editableRef.current) {
+        return;
+      }
+      const text = serialize(editableRef.current).trim();
+      if (!text) {
+        return;
+      }
+      if (hasHistory) {
+        historyRef.current.push(text);
+        historyIndexRef.current = -1;
+        currentDraftRef.current = '';
+      }
+      onSubmit?.(text);
+      editableRef.current.textContent = '';
+      setIsEmpty(true);
+      onChange?.('');
+      return;
+    }
+
+    // History navigation (only when trigger menu is not active)
+    if (hasHistory && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      if (!editableRef.current) {
+        return;
+      }
+      const text = serialize(editableRef.current);
+      const history = historyRef.current;
+      if (history.length === 0) {
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        if (historyIndexRef.current === -1) {
+          currentDraftRef.current = text;
+        }
+        const nextIndex = historyIndexRef.current === -1 ? history.length - 1 : Math.max(0, historyIndexRef.current - 1);
+        historyIndexRef.current = nextIndex;
+        editableRef.current.textContent = history[nextIndex];
+        selectAll(editableRef.current);
+        emitChange();
+        e.preventDefault();
+      } else if (e.key === 'ArrowDown' && historyIndexRef.current !== -1) {
+        const nextIndex = historyIndexRef.current + 1;
+        if (nextIndex >= history.length) {
+          historyIndexRef.current = -1;
+          editableRef.current.textContent = currentDraftRef.current;
+          if (currentDraftRef.current) {
+            selectAll(editableRef.current);
+          }
+        } else {
+          historyIndexRef.current = nextIndex;
+          editableRef.current.textContent = history[nextIndex];
+          selectAll(editableRef.current);
+        }
+        emitChange();
+        e.preventDefault();
+      }
+    }
+  }, [hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp]);
+  const handlePaste = useCallback(e => {
+    const editable = editableRef.current;
+    if (!editable) {
+      return;
+    }
+
+    // Place a caret at the end of the editable if the Selection has
+    // no Range inside it — programmatic focus alone doesn't create
+    // one in Chromium/Firefox.
+    ensureCaretInside(editable);
+
+    // Handle paste near/into tokens first
+    if (tokens.handlePaste(e)) {
+      return;
+    }
+    const files = Array.from(e.clipboardData.files);
+    if (files.length > 0) {
+      e.preventDefault();
+      onFiles?.(files);
+      return;
+    }
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+
+    // Paste-as-token: convert long pastes to token chips
+    if (pasteAsToken?.onPaste(e, text)) {
+      emitChange();
+      return;
+    }
+
+    // Consumer onPaste — return true to prevent default text insert
+    const handled = onPasteProp?.(e, text);
+    if (handled) {
+      emitChange();
+      return;
+    }
+    insertTextAtCursor(editable, text);
+    emitChange();
+  }, [onFiles, onPasteProp, emitChange, tokens, pasteAsToken]);
+  const maxHeight = maxRows * LINE_HEIGHT_PX;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    ...mergeProps(themeProps('chat-composer-input'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
+    ...rest,
+    children: [isEmpty && /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x10l6tqk x13vifvy x1o0tod xtijo5x x47corl xv1l7n4 xjm74w1 x6pjikd x19v9tvf x9ynric x87ps6o x9epnlk"
+      },
+      "aria-hidden": "true",
+      children: placeholder
+    }), /*#__PURE__*/_jsx("div", {
+      ref: editableRef,
+      "aria-multiline": "true",
+      "aria-label": label,
+      contentEditable: !isDisabled,
+      suppressContentEditableWarning: true,
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      ...triggerMenu.ariaProps,
+      ...mergeProps({
+        className: "x1a2a7pz x126k92a x13faqbe x1odjw0f xjm74w1 x6pjikd x19v9tvf x9ynric x1tgivj0 xxugrtn x9epnlk"
+      }, {
+        style: {
+          maxHeight: `${maxHeight}px`
+        }
+      })
+    }), triggerMenu.renderMenu(), tokens.tokenPortals.filter(({
+      span
+    }) => span.isConnected).map(({
+      id,
+      span,
+      token
+    }) => /*#__PURE__*/createPortal(isCustomToken(token) ? /*#__PURE__*/_jsx("span", {
+      children: token.render()
+    }, id) : token.value.length > (pasteAsToken === null ? Infinity : 200) ? /*#__PURE__*/_jsx(ChatPastedTextToken, {
+      text: token.value,
+      onExpand: () => tokens.expandToken(id)
+    }, id) : /*#__PURE__*/_jsx(Badge, {
+      label: token.label,
+      variant: token.variant,
+      icon: token.icon
+    }, id), span))]
+  });
+}
+ChatComposerInput.displayName = 'ChatComposerInput';
+
+// =============================================================================
+// Token element helper (for custom rendering in stories/consumers)
+// =============================================================================
+
+export function ChatComposerTokenElement({
+  token
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    "data-pharos-token": "",
+    "data-pharos-token-value": token.value,
+    contentEditable: false,
+    style: {
+      display: 'inline-flex',
+      verticalAlign: 'baseline'
+    },
+    children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsx(Badge, {
+      label: token.label,
+      variant: token.variant,
+      icon: token.icon
+    })
+  });
+}
+ChatComposerTokenElement.displayName = 'ChatComposerTokenElement';

package/dist/Chat/ChatContext.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @file ChatContext.tsx
+ * @input Uses React createContext
+ * @output Exports Chat message/list/composer/layout contexts. The composer
+ *   context (value + input-control registration) is public composition API,
+ *   re-exported from Chat/index.ts for custom inputs.
+ * @position Shared contexts; consumed by ChatMessage, ChatComposer,
+ *   ChatComposerInput, ChatSendButton, and custom inputs.
+ */
+import { type RefObject } from 'react';
+export type ChatMessageSender = 'user' | 'assistant' | 'system';
+export type ChatDensity = 'compact' | 'balanced' | 'spacious';
+export interface ChatMessageContextValue {
+    sender: ChatMessageSender;
+    density: ChatDensity;
+}
+export declare const ChatMessageContext: import("react").Context<ChatMessageContextValue | null>;
+export declare function useChatMessageContext(): ChatMessageContextValue | null;
+export interface ChatListContextValue {
+    density: ChatDensity;
+}
+export declare const ChatListContext: import("react").Context<ChatListContextValue | null>;
+export declare function useChatListContext(): ChatListContextValue | null;
+/**
+ * Imperative surface the composer shell can invoke on its input slot.
+ *
+ * The input is one slot inside the composer body — it does not span the whole
+ * body — so shell-level interactions like "click empty space to focus the
+ * input" must flow shell → input. A custom input registers this control (via
+ * `ChatComposerContextValue.inputControlRef`) so the shell can drive it
+ * without knowing its DOM shape. Optional methods can be added over time;
+ * inputs implement only what they support.
+ */
+export interface ChatComposerInputControl {
+    /** Move keyboard focus into the input. */
+    focus: () => void;
+}
+export interface ChatComposerContextValue {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder: string;
+    isDisabled: boolean;
+    isStopShown: boolean;
+    canSend: boolean;
+    onStop?: () => void;
+    /**
+     * Mutable handle the input slot populates with its {@link
+     * ChatComposerInputControl}. The shell reads `.current` to drive the input
+     * (e.g. focus on body click). A custom input assigns
+     * `inputControlRef.current = { focus }` on mount and clears it on unmount.
+     * When unset, the shell falls back to focusing a `contenteditable`/`textarea`
+     * it finds in the body.
+     */
+    inputControlRef?: RefObject<ChatComposerInputControl | null>;
+}
+export declare const ChatComposerContext: import("react").Context<ChatComposerContextValue | null>;
+export declare function useChatComposerContext(): ChatComposerContextValue | null;
+export interface ChatLayoutContextValue {
+    /** Ref to the scrollable container element that wraps the message area. */
+    scrollContainerRef: React.RefObject<HTMLElement | null>;
+    /** Callback ref for the message list content element — layout observes it for size changes. */
+    contentRef: (el: HTMLElement | null) => void;
+}
+export declare const ChatLayoutContext: import("react").Context<ChatLayoutContextValue | null>;
+export declare function useChatLayoutContext(): ChatLayoutContextValue | null;
+//# sourceMappingURL=ChatContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,yDAE9B,CAAC;AAGF,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAGhF,wBAAgB,kBAAkB,IAAI,oBAAoB,GAAG,IAAI,CAEhE;AAMD;;;;;;;;;GASG;AACH,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAC;CAC9D;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAGvD,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxD,+FAA+F;IAC/F,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,wDAE7B,CAAC;AAGF,wBAAgB,oBAAoB,IAAI,sBAAsB,GAAG,IAAI,CAEpE"}

package/dist/Chat/ChatContext.js

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatContext.tsx
+ * @input Uses React createContext
+ * @output Exports Chat message/list/composer/layout contexts. The composer
+ *   context (value + input-control registration) is public composition API,
+ *   re-exported from Chat/index.ts for custom inputs.
+ * @position Shared contexts; consumed by ChatMessage, ChatComposer,
+ *   ChatComposerInput, ChatSendButton, and custom inputs.
+ */
+import { createContext, use } from 'react';
+export const ChatMessageContext = /*#__PURE__*/createContext(null);
+ChatMessageContext.displayName = 'ChatMessageContext';
+export function useChatMessageContext() {
+  return use(ChatMessageContext);
+}
+export const ChatListContext = /*#__PURE__*/createContext(null);
+ChatListContext.displayName = 'ChatListContext';
+export function useChatListContext() {
+  return use(ChatListContext);
+}
+
+// =============================================================================
+// Composer context — shared state between ChatComposer and ChatComposerInput
+// =============================================================================
+
+/**
+ * Imperative surface the composer shell can invoke on its input slot.
+ *
+ * The input is one slot inside the composer body — it does not span the whole
+ * body — so shell-level interactions like "click empty space to focus the
+ * input" must flow shell → input. A custom input registers this control (via
+ * `ChatComposerContextValue.inputControlRef`) so the shell can drive it
+ * without knowing its DOM shape. Optional methods can be added over time;
+ * inputs implement only what they support.
+ */
+
+export const ChatComposerContext = /*#__PURE__*/createContext(null);
+ChatComposerContext.displayName = 'ChatComposerContext';
+export function useChatComposerContext() {
+  return use(ChatComposerContext);
+}
+
+// =============================================================================
+// Layout context — shared between ChatLayout and ChatMessageList
+// =============================================================================
+
+export const ChatLayoutContext = /*#__PURE__*/createContext(null);
+ChatLayoutContext.displayName = 'ChatLayoutContext';
+export function useChatLayoutContext() {
+  return use(ChatLayoutContext);
+}