@bigbinary/neetoui-rn 3.4.0 → 3.5.1

package/src/components/ChatInput/ChatInput.tsx

@@ -6,35 +6,50 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { type TextInput, View, type TextInputProps } from "react-native";
+import {
+  Keyboard,
+  type TextInput,
+  View,
+  type TextInputProps,
+} from "react-native";
 import Attachment from "@bigbinary/neeto-icons-rn/icons/Attachment";
 import BookOpen from "@bigbinary/neeto-icons-rn/icons/BookOpen";
 import CannedResponses from "@bigbinary/neeto-icons-rn/icons/CannedResponses";
-import ChatBubble from "@bigbinary/neeto-icons-rn/icons/ChatBubble";
 import Down from "@bigbinary/neeto-icons-rn/icons/Down";
 import Expand from "@bigbinary/neeto-icons-rn/icons/Expand";
-import Forward from "@bigbinary/neeto-icons-rn/icons/Forward";
 import Minimize from "@bigbinary/neeto-icons-rn/icons/Minimize";
-import Notes from "@bigbinary/neeto-icons-rn/icons/Notes";
 import SendPlane from "@bigbinary/neeto-icons-rn/icons/SendPlane";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 import { moderateScale, scaleFor } from "../../utils/scale";
 import { BottomSheet } from "../BottomSheet";
+import { RichTextEditor, type RichTextEditorRef } from "../RichTextEditor";
+import { TextType } from "../RichTextEditor/icons";
 import { Skeleton } from "../Skeleton";
+import { Toast } from "../Toast";
 import { Touchable } from "../Touchable";
 import { Typography } from "../Typography";
 import { AttachmentsView } from "./AttachmentsView";
 import { IconButton } from "./IconButton";
 import { MentionsInput } from "./MentionsInput";
+import { SegmentedOptions } from "./SegmentedOptions";
 import {
   ACTION_LABELS,
+  REPLY_ACTION_LABEL,
+  NOTE_HINT,
   OPTION_TYPES,
   PLACEHOLDERS,
   type ChatInputOption,
 } from "./constants";
 import {
   convertMentionsToHTMLAndPlainText,
+  htmlToPlainText,
   type MentionSuggestion,
 } from "./mentions";
 
@@ -47,8 +62,77 @@ export type ChatInputPayload = {
   status?: string;
 };
 
+export type ChatInputLayout = "compact" | "expanded";
+
+// tentap's async messages never reject, so a WebView that stops answering
+// would otherwise leave Send silently stuck.
+const RICH_CONTENT_TIMEOUT = 5000;
+
+const withTimeout = <T,>(promise: Promise<T>) =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(
+      () => reject(new Error("Editor did not respond")),
+      RICH_CONTENT_TIMEOUT
+    );
+    promise.then(
+      value => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      error => {
+        clearTimeout(timer);
+        reject(error);
+      }
+    );
+  });
+
+// Each report is a WebView round trip; typing should not queue one per key.
+const RICH_TEXT_REPORT_DELAY = 150;
+
+export type ChatInputResizable = {
+  initialHeight: number;
+  minHeight: number;
+  maxHeight: number;
+  /** Called with the settled height after each drag, e.g. to persist it. */
+  onResizeEnd?: (height: number) => void;
+};
+
+// Notes get their own document: a draft reply and its signature must not
+// follow the agent into an internal note, or the other way round.
+type RichEditorKey = "EMAIL" | "NOTE";
+
+const RICH_EDITOR_OPTIONS: Record<RichEditorKey, ChatInputOption[]> = {
+  EMAIL: [OPTION_TYPES.REPLY, OPTION_TYPES.FORWARD],
+  NOTE: [OPTION_TYPES.NOTE],
+};
+
+const RICH_EDITOR_DEFAULT_OPTION: Record<RichEditorKey, ChatInputOption> = {
+  EMAIL: OPTION_TYPES.REPLY,
+  NOTE: OPTION_TYPES.NOTE,
+};
+
+const editorKeyFor = (option: ChatInputOption): RichEditorKey =>
+  option === OPTION_TYPES.NOTE ? "NOTE" : "EMAIL";
+
+const clampHeight = (height: number, min: number, max: number) => {
+  "worklet";
+
+  return Math.min(Math.max(height, min), max);
+};
+
+export type ChatInputFocusTarget = "start" | "end" | "emptyParagraph";
+
 export type ChatInputRef = {
   clearEmailFields: () => void;
+  /** Rich: replaces the document. Plain: replaces the text with the HTML's text via onChangeText. */
+  setHTML: (html: string) => void;
+  /**
+   * Rich: inserts at the cursor of the option's editor (default: the
+   * selected one). Plain: appends the HTML's text via onChangeText.
+   */
+  insertHTML: (html: string, option?: ChatInputOption) => void;
+  focus: (where?: ChatInputFocusTarget) => void;
+  getHTML: () => Promise<string>;
 };
 
 export type ChatInputProps = Omit<
@@ -79,6 +163,35 @@ export type ChatInputProps = Omit<
   suggestions?: MentionSuggestion[];
   disabled?: boolean;
   isLoading?: boolean;
+  /** "expanded" (tablets) moves the mode toggles into a header row and keeps attachments open. */
+  layout?: ChatInputLayout;
+  /** Minimum visible lines of text. */
+  minLines?: number;
+  /** Rendered between the input and the attachments. */
+  Signature?: ReactNode;
+  /** Rendered at the end of the toolbar's left group. */
+  ToolbarExtras?: ReactNode;
+  /** Header hint shown in expanded layout while a note is selected. */
+  noteHint?: string;
+  /**
+   * "rich" swaps the text input for RichTextEditor; it then ignores value and
+   * suggestions, reports the editor's plain text through onChangeText
+   * (debounced), and content is reset through the ref.
+   */
+  editor?: "plain" | "rich";
+  /** Adds a drag handle on top that resizes the composer within the bounds. */
+  resizable?: ChatInputResizable;
+  /** Rich only: options that keep the plain mention input. */
+  plainEditorFor?: ChatInputOption[];
+  /**
+   * Rich only: receives the plain text of the option's editor; defaults to
+   * onChangeText. Notes and replies keep separate documents.
+   */
+  onRichTextChange?: (text: string, option: ChatInputOption) => void;
+  /** Rich only: the signature at the end of initialHTML; first focus lands above it. */
+  signatureHTML?: string;
+  /** Rich only: the document the reply editor starts with; notes start empty. */
+  initialHTML?: string;
 };
 
 /**
@@ -114,12 +227,71 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       suggestions = [],
       disabled = false,
       isLoading = false,
+      layout = "compact",
+      minLines,
+      Signature,
+      ToolbarExtras,
+      noteHint = NOTE_HINT,
+      editor = "plain",
+      plainEditorFor = [],
+      resizable,
+      onRichTextChange,
+      initialHTML,
+      signatureHTML,
       ...inputProps
     },
     ref
   ) => {
     const { theme } = useUnistyles();
     const inputRef = useRef<TextInput>(null);
+    const richRefs = useRef<Record<RichEditorKey, RichTextEditorRef | null>>({
+      EMAIL: null,
+      NOTE: null,
+    });
+    const isSendingRich = useRef(false);
+
+    const minHeight = resizable?.minHeight ?? 0;
+    const maxHeight = resizable?.maxHeight ?? 0;
+    const height = useSharedValue(resizable?.initialHeight ?? 0);
+    const dragStartHeight = useSharedValue(0);
+    const reportHeight = (settled: number) => resizable?.onResizeEnd?.(settled);
+
+    const resizeGesture = Gesture.Pan()
+      .withTestId("composer-resize")
+      .hitSlop({ top: 8, bottom: 8 })
+      .onStart(() => {
+        dragStartHeight.value = clampHeight(height.value, minHeight, maxHeight);
+      })
+      .onUpdate(({ translationY }) => {
+        height.value = clampHeight(
+          dragStartHeight.value - translationY,
+          minHeight,
+          maxHeight
+        );
+      })
+      .onEnd(() => {
+        runOnJS(reportHeight)(height.value);
+      });
+
+    // The bound is re-read here so a shrinking maxHeight (keyboard up)
+    // clamps a stored height without a drag.
+    const resizedStyle = useAnimatedStyle(() => ({
+      height: clampHeight(height.value, minHeight, maxHeight),
+    }));
+    const [isFormattingVisible, setIsFormattingVisible] = useState(true);
+    const richTextTimers = useRef<
+      Partial<Record<RichEditorKey, ReturnType<typeof setTimeout>>>
+    >({});
+
+    useEffect(
+      () => () =>
+        Object.values(richTextTimers.current).forEach(timer =>
+          clearTimeout(timer)
+        ),
+      []
+    );
+
+    const hasRichEditor = editor === "rich";
 
     const [selectedOption, setSelectedOption] = useState<ChatInputOption>(
       initialSelectedOption
@@ -135,6 +307,48 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
     const isReplySelected = selectedOption === OPTION_TYPES.REPLY;
     const isNoteSelected = selectedOption === OPTION_TYPES.NOTE;
     const isForwardSelected = selectedOption === OPTION_TYPES.FORWARD;
+    const isExpanded = layout === "expanded";
+    const isRich = hasRichEditor && !plainEditorFor.includes(selectedOption);
+    const activeKey = editorKeyFor(selectedOption);
+    const activeEditor = () => richRefs.current[activeKey];
+
+    // The editor a mode needs mounts on first use and then stays, so a
+    // draft survives switching back and forth.
+    const [editorSeeds, setEditorSeeds] = useState<
+      Partial<Record<RichEditorKey, string>>
+    >(() =>
+      hasRichEditor ? { [editorKeyFor(initialSelectedOption)]: "" } : {}
+    );
+    const [lateEditors, setLateEditors] = useState<RichEditorKey[]>([]);
+
+    const mountEditor = (key: RichEditorKey, html = "") => {
+      setEditorSeeds(seeds => ({ ...seeds, [key]: (seeds[key] ?? "") + html }));
+      setLateEditors(keys => (keys.includes(key) ? keys : [...keys, key]));
+    };
+
+    useEffect(() => {
+      if (isRich && editorSeeds[activeKey] === undefined) {
+        mountEditor(activeKey);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isRich, activeKey]);
+
+    const optionInEditor = (key: RichEditorKey) =>
+      RICH_EDITOR_OPTIONS[key].includes(selectedOption)
+        ? selectedOption
+        : RICH_EDITOR_DEFAULT_OPTION[key];
+
+    const handleRichChange = (key: RichEditorKey) => {
+      clearTimeout(richTextTimers.current[key]);
+      const option = optionInEditor(key);
+      richTextTimers.current[key] = setTimeout(async () => {
+        const text = await richRefs.current[key]?.getText();
+        if (text === undefined) return;
+
+        if (onRichTextChange) onRichTextChange(text, option);
+        else onChangeText(text);
+      }, RICH_TEXT_REPORT_DELAY);
+    };
 
     useImperativeHandle(
       ref,
@@ -144,10 +358,44 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
           setToEmailsForForward([]);
           setCcEmails([]);
           setBccEmails([]);
-          inputRef.current?.blur();
+          if (isRich) activeEditor()?.blur();
+          else inputRef.current?.blur();
+        },
+        setHTML: html =>
+          isRich
+            ? activeEditor()?.setHTML(html)
+            : onChangeText(htmlToPlainText(html)),
+        insertHTML: (html, option = selectedOption) => {
+          if (!hasRichEditor || plainEditorFor.includes(option)) {
+            onChangeText(`${value}${htmlToPlainText(html)}`);
+
+            return;
+          }
+
+          const key = editorKeyFor(option);
+          const target = richRefs.current[key];
+          if (target) target.insertHTML(html);
+          else mountEditor(key, html);
         },
+        focus: where =>
+          isRich ? activeEditor()?.focus(where) : inputRef.current?.focus(),
+        getHTML: async () =>
+          isRich
+            ? ((await activeEditor()?.getHTML()) ?? "")
+            : convertMentionsToHTMLAndPlainText({ suggestions, value }).html,
       }),
-      [initialToEmails]
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        initialToEmails,
+        hasRichEditor,
+        isRich,
+        activeKey,
+        selectedOption,
+        plainEditorFor,
+        onChangeText,
+        suggestions,
+        value,
+      ]
     );
 
     useEffect(() => {
@@ -167,15 +415,22 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
 
     const selectOption = (option: ChatInputOption) => {
       setIsAttachmentsVisible(false);
-      inputRef.current?.focus();
+      const target =
+        hasRichEditor && !plainEditorFor.includes(option)
+          ? richRefs.current[editorKeyFor(option)]
+          : inputRef.current;
+      target?.focus();
       setSelectedOption(option);
     };
 
-    const buildPayload = (extra?: Partial<ChatInputPayload>) => ({
+    const buildPayload = (
+      content: Pick<ChatInputPayload, "html" | "plainText">,
+      extra?: Partial<ChatInputPayload>
+    ) => ({
       toEmails: isForwardSelected ? toEmailsForForward : toEmails,
       ccEmails,
       bccEmails,
-      ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+      ...content,
       ...extra,
     });
 
@@ -188,42 +443,182 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       FORWARD: onForward ?? (() => {}),
     };
 
-    const handleAction = (extra?: Partial<ChatInputPayload>) => {
-      actionHandlers[selectedOption](buildPayload(extra));
+    const handleAction = async (extra?: Partial<ChatInputPayload>) => {
+      const handler = actionHandlers[selectedOption];
       setIsAttachmentsVisible(false);
+
+      const editorRef = activeEditor();
+      if (!isRich || !editorRef) {
+        handler(
+          buildPayload(
+            convertMentionsToHTMLAndPlainText({ suggestions, value }),
+            extra
+          )
+        );
+
+        return;
+      }
+
+      if (isSendingRich.current) return;
+
+      isSendingRich.current = true;
+      let content: [string, string];
+      try {
+        content = await withTimeout(
+          Promise.all([editorRef.getHTML(), editorRef.getText()])
+        );
+      } catch {
+        Toast.show({
+          type: "error",
+          text1: "Couldn't read the message. Try sending again.",
+        });
+
+        return;
+      } finally {
+        isSendingRich.current = false;
+      }
+
+      const [html, plainText] = content;
+      handler(buildPayload({ html, plainText }, extra));
+    };
+
+    // Keyboard.dismiss() only reaches native inputs; the rich editor's
+    // keyboard belongs to its WebView and closes on blur.
+    const dismissKeyboard = () => {
+      if (isRich) activeEditor()?.blur();
+      Keyboard.dismiss();
+    };
+
+    const withKeyboardDismissed = (action?: () => void) => () => {
+      dismissKeyboard();
+      action?.();
     };
 
     const handleAttachmentPress = () => {
+      dismissKeyboard();
       // v2: when collapsed attachments already exist, first tap only
       // expands them instead of re-opening the upload flow.
-      if (isAttachmentsVisible || attachmentsCount === 0) onAttachment();
+      if (isExpanded || isAttachmentsVisible || attachmentsCount === 0) {
+        onAttachment();
+      }
       setIsAttachmentsVisible(true);
     };
 
-    const shouldShowExpandToggle =
-      attachmentsCount > 0 || (toEmails.length > 0 && !isNoteSelected);
+    const shouldShowExpandToggle = !isExpanded && attachmentsCount > 0;
+
+    const recipients = toEmails.filter(Boolean).join(", ");
+    let headerHint: string | undefined;
+    if (isNoteSelected) headerHint = noteHint;
+    else if (isReplySelected && recipients) headerHint = `To: ${recipients}`;
 
     const isActionDisabled =
       disabled || (isForwardSelected && toEmailsForForward.length === 0);
 
+    // The formatting bar draws its own bottom line; a second one here would
+    // double it when nothing sits between them.
+    const isFooterBelowToolbar =
+      isRich && isFormattingVisible && attachmentsCount === 0;
+
+    const modeOptions: ChatInputOption[] = onForward
+      ? [OPTION_TYPES.REPLY, OPTION_TYPES.NOTE, OPTION_TYPES.FORWARD]
+      : [OPTION_TYPES.REPLY, OPTION_TYPES.NOTE];
+
+    const actionLabel =
+      isExpanded && isReplySelected
+        ? REPLY_ACTION_LABEL
+        : ACTION_LABELS[selectedOption];
+
     return (
-      <View style={styles.root}>
+      <Animated.View
+        style={[styles.root, resizable && [styles.fixedHeight, resizedStyle]]}
+      >
+        {resizable && (
+          <GestureDetector gesture={resizeGesture}>
+            <View
+              accessibilityLabel="Resize composer"
+              accessibilityRole="adjustable"
+              style={styles.resizeHandleArea}
+            >
+              <View style={styles.resizeHandle} />
+            </View>
+          </GestureDetector>
+        )}
         {isLoading && (
           <Skeleton animated height={moderateScale(2)} variant="line" />
         )}
-        <View style={[styles.container, isNoteSelected && styles.noteSurface]}>
-          <View style={styles.inputRow}>
-            <MentionsInput
-              inputRef={inputRef}
-              placeholder={PLACEHOLDERS[selectedOption]}
-              suggestions={suggestions}
-              value={value}
-              shouldShowSuggestions={showSuggestionsFor.includes(
-                selectedOption
-              )}
-              onChange={onChangeText}
-              {...inputProps}
-            />
+        <View
+          style={[
+            styles.card,
+            resizable && styles.resizableCard,
+            isNoteSelected && styles.noteSurface,
+          ]}
+        >
+          {headerHint && (
+            <View style={styles.headerBand}>
+              <Typography numberOfLines={1} size="s" style={styles.headerHint}>
+                {headerHint}
+              </Typography>
+            </View>
+          )}
+          <View
+            style={[
+              styles.inputRow,
+              resizable && styles.fill,
+              !isRich && styles.plainInputRow,
+            ]}
+          >
+            {(Object.keys(RICH_EDITOR_OPTIONS) as RichEditorKey[]).map(key => {
+              const seed = editorSeeds[key];
+              if (seed === undefined) return null;
+
+              const isNote = key === "NOTE";
+              const options = RICH_EDITOR_OPTIONS[key];
+              const isShown = isRich && key === activeKey;
+
+              return (
+                <RichTextEditor
+                  autoFocus={
+                    lateEditors.includes(key) || !!inputProps.autoFocus
+                  }
+                  backgroundColor={
+                    isNote ? theme.colors.background.oldLace : undefined
+                  }
+                  initialHTML={isNote ? seed : `${initialHTML ?? ""}${seed}`}
+                  key={key}
+                  placeholder={PLACEHOLDERS[optionInEditor(key)]}
+                  ref={instance => {
+                    richRefs.current[key] = instance;
+                  }}
+                  style={[
+                    styles.richEditor,
+                    resizable && styles.resizableRichEditor,
+                    !isShown && styles.hidden,
+                  ]}
+                  mentions={
+                    options.some(option => showSuggestionsFor.includes(option))
+                      ? suggestions
+                      : undefined
+                  }
+                  toolbar={isFormattingVisible ? "fixed" : "none"}
+                  trailingHTML={isNote ? undefined : signatureHTML}
+                  onChange={() => handleRichChange(key)}
+                />
+              );
+            })}
+            {!isRich && (
+              <MentionsInput
+                inputRef={inputRef}
+                minLines={minLines}
+                placeholder={PLACEHOLDERS[selectedOption]}
+                suggestions={suggestions}
+                value={value}
+                shouldShowSuggestions={showSuggestionsFor.includes(
+                  selectedOption
+                )}
+                onChange={onChangeText}
+                {...inputProps}
+              />
+            )}
             {shouldShowExpandToggle && (
               <IconButton
                 accessibilityLabel={
@@ -235,52 +630,54 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
               />
             )}
           </View>
-          <AttachmentsView
-            Attachments={Attachments}
-            attachmentsCount={attachmentsCount}
-            isAttachmentsVisible={isAttachmentsVisible}
-            isNoteOptionSelected={isNoteSelected}
-            onExpand={() => setIsAttachmentsVisible(true)}
-          />
-          <View style={styles.toolbar}>
-            <View style={styles.toolbarGroup}>
-              <IconButton
-                accessibilityLabel="Reply"
-                Icon={ChatBubble}
-                isActive={isReplySelected}
-                onPress={() => selectOption(OPTION_TYPES.REPLY)}
-              />
-              <IconButton
-                accessibilityLabel="Add note"
-                Icon={Notes}
-                isActive={isNoteSelected}
-                onPress={() => selectOption(OPTION_TYPES.NOTE)}
-              />
-              {onForward && (
+          {Signature}
+          <View style={styles.attachments}>
+            <AttachmentsView
+              Attachments={Attachments}
+              attachmentsCount={attachmentsCount}
+              isAlwaysExpanded={isExpanded}
+              isAttachmentsVisible={isAttachmentsVisible}
+              isNoteOptionSelected={isNoteSelected}
+              onExpand={() => setIsAttachmentsVisible(true)}
+            />
+          </View>
+          <View
+            style={[
+              styles.footer,
+              !isExpanded && styles.compactFooter,
+              isFooterBelowToolbar && styles.footerBelowToolbar,
+            ]}
+          >
+            <SegmentedOptions
+              isCompact={!isExpanded}
+              options={modeOptions}
+              selected={selectedOption}
+              onSelect={selectOption}
+            />
+            <View style={styles.footerActions}>
+              {isRich && (
                 <IconButton
-                  accessibilityLabel="Forward"
-                  Icon={Forward}
-                  isActive={isForwardSelected}
-                  onPress={() => selectOption(OPTION_TYPES.FORWARD)}
+                  accessibilityLabel={
+                    isFormattingVisible ? "Hide formatting" : "Show formatting"
+                  }
+                  Icon={TextType}
+                  isActive={isFormattingVisible}
+                  onPress={() => setIsFormattingVisible(visible => !visible)}
                 />
               )}
-              <View style={styles.toolbarDivider} />
-              {/* isActive is the selected-option tint for the three mode
-                  toggles above. These two are actions, not modes, so they
-                  stay at full strength like the attachment button. */}
               {onCannedResponse &&
                 showCannedResponsesFor.includes(selectedOption) && (
                   <IconButton
                     accessibilityLabel="Canned responses"
                     Icon={CannedResponses}
-                    onPress={onCannedResponse}
+                    onPress={withKeyboardDismissed(onCannedResponse)}
                   />
                 )}
               {onArticles && showArticlesFor.includes(selectedOption) && (
                 <IconButton
                   accessibilityLabel="Articles"
                   Icon={BookOpen}
-                  onPress={onArticles}
+                  onPress={withKeyboardDismissed(onArticles)}
                 />
               )}
               <IconButton
@@ -289,11 +686,7 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 Icon={Attachment}
                 onPress={handleAttachmentPress}
               />
-            </View>
-            <View style={styles.toolbarGroup}>
-              {/* Both actions share one filled pill, split by a divider, as
-                  on web. The send affordance is the plane alone on a reply;
-                  note and forward keep their labels. */}
+              {ToolbarExtras}
               <View
                 style={[
                   styles.sendGroup,
@@ -304,15 +697,17 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                   accessibilityLabel="Send"
                   accessibilityRole="button"
                   disabled={isActionDisabled}
-                  style={styles.sendAction}
-                  onPress={() => handleAction()}
+                  style={[
+                    styles.sendAction,
+                    !isExpanded && styles.compactSendAction,
+                  ]}
+                  onPress={() => void handleAction()}
                 >
-                  {!!ACTION_LABELS[selectedOption] && (
+                  {actionLabel ? (
                     <Typography size="m" style={styles.sendLabel}>
-                      {ACTION_LABELS[selectedOption]}
+                      {actionLabel}
                     </Typography>
-                  )}
-                  {isReplySelected && (
+                  ) : (
                     <SendPlane
                       color={theme.colors.text.inverse}
                       size={moderateScale(20)}
@@ -327,7 +722,9 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                       accessibilityRole="button"
                       disabled={disabled}
                       style={styles.sendMenu}
-                      onPress={() => setIsReplyMenuVisible(true)}
+                      onPress={withKeyboardDismissed(() =>
+                        setIsReplyMenuVisible(true)
+                      )}
                     >
                       <Down
                         color={theme.colors.text.inverse}
@@ -342,13 +739,13 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                   data={["Send and set as closed"]}
                   hide={() => setIsReplyMenuVisible(false)}
                   isVisible={isReplyMenuVisible}
-                  onItemPress={() => handleAction({ status: "closed" })}
+                  onItemPress={() => void handleAction({ status: "closed" })}
                 />
               )}
             </View>
           </View>
         </View>
-      </View>
+      </Animated.View>
     );
   }
 );
@@ -361,51 +758,121 @@ const styles = StyleSheet.create((theme, rt) => {
   return {
     // A caller that caps this composer's height (desk clamps it to a share
     // of the screen) would otherwise have Yoga keep every child at its
-    // natural height and let overflow clip the last one — the toolbar.
+    // natural height and let overflow clip the last one — the footer.
     // Declaring what may shrink makes the text area absorb the squeeze
     // instead, so the actions stay reachable however tall the attachments
     // and typed content get.
     root: {
       flexShrink: 1,
     },
-    container: {
+    // A dragged height is the agent's choice; the conversation gives way.
+    fixedHeight: {
+      flexShrink: 0,
+    },
+    fill: {
+      flex: 1,
+    },
+    // The drag sets the height, so the editor gives way instead of pushing
+    // the footer out; the card clips while the pill above stays visible.
+    resizableCard: {
+      flex: 1,
+      overflow: "hidden",
+    },
+    resizableRichEditor: {
+      minHeight: 0,
+    },
+    // desk-web's handle: a pill on the line above the composer. It overlays
+    // the top edge instead of taking a row, so the To band starts flush; the
+    // pill's upper half shows only where the parent does not clip.
+    resizeHandleArea: {
+      alignItems: "center",
+      height: moderateScale(16),
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      zIndex: 1,
+    },
+    resizeHandle: {
+      backgroundColor: theme.colors.border.secondary,
+      borderRadius: moderateScale(3),
+      height: moderateScale(6),
+      marginTop: -moderateScale(3),
+      width: moderateScale(48),
+    },
+    card: {
+      backgroundColor: theme.colors.background.primary,
       flexShrink: 1,
-      paddingBottom: moderateScale(5),
-      paddingHorizontal: moderateScale(16),
     },
     noteSurface: {
       backgroundColor: theme.colors.background.oldLace,
     },
+    headerBand: {
+      backgroundColor: theme.colors.background.secondary,
+      borderBottomColor: theme.colors.border.primary,
+      borderBottomWidth: 1,
+      paddingHorizontal: moderateScale(14),
+      paddingVertical: moderateScale(10),
+    },
+    headerHint: {
+      color: theme.colors.text.secondary,
+    },
     inputRow: {
       flexDirection: "row",
       flexShrink: 1,
       justifyContent: "space-between",
     },
+    plainInputRow: {
+      paddingHorizontal: moderateScale(14),
+      paddingTop: moderateScale(8),
+    },
+    // Kept mounted while hidden so the reply draft survives a mode switch.
+    hidden: {
+      display: "none",
+    },
+    richEditor: {
+      flex: 1,
+      minHeight: moderateScale(160),
+    },
     expandButton: {
       alignSelf: "center",
     },
-    toolbar: {
+    attachments: {
+      paddingHorizontal: moderateScale(14),
+    },
+    footer: {
       alignItems: "center",
+      borderTopColor: theme.colors.border.primary,
+      borderTopWidth: 1,
       flexDirection: "row",
       flexShrink: 0,
+      gap: moderateScale(8),
       justifyContent: "space-between",
-      marginTop: moderateScale(10),
+      paddingHorizontal: moderateScale(10),
+      paddingVertical: moderateScale(8),
     },
-    toolbarGroup: {
+    footerBelowToolbar: {
+      borderTopWidth: 0,
+    },
+    compactFooter: {
+      gap: moderateScale(4),
+      paddingHorizontal: moderateScale(6),
+    },
+    compactSendAction: {
+      paddingHorizontal: moderateScale(10),
+    },
+    footerActions: {
       alignItems: "center",
       flexDirection: "row",
-    },
-    toolbarDivider: {
-      alignSelf: "stretch",
-      backgroundColor: theme.colors.palette.grey400,
-      marginHorizontal: moderateScale(5),
-      width: moderateScale(2),
+      flexShrink: 1,
+      gap: moderateScale(2),
     },
     sendGroup: {
       alignItems: "center",
       backgroundColor: theme.colors.primary,
       borderRadius: moderateScale(8),
       flexDirection: "row",
+      marginLeft: moderateScale(4),
       // Clips the divider to the rounded corners.
       overflow: "hidden",
     },
@@ -415,10 +882,9 @@ const styles = StyleSheet.create((theme, rt) => {
     sendAction: {
       alignItems: "center",
       flexDirection: "row",
-      gap: moderateScale(6),
       justifyContent: "center",
-      minHeight: moderateScale(34),
-      paddingHorizontal: moderateScale(12),
+      minHeight: moderateScale(36),
+      paddingHorizontal: moderateScale(14),
     },
     sendGroupDivider: {
       alignSelf: "stretch",
@@ -429,7 +895,7 @@ const styles = StyleSheet.create((theme, rt) => {
     sendMenu: {
       alignItems: "center",
       justifyContent: "center",
-      minHeight: moderateScale(34),
+      minHeight: moderateScale(36),
       paddingHorizontal: moderateScale(8),
     },
     sendLabel: {