feat: Add ref API to Composer for programmatic send box focus

[marclundgren]

• Add forwardRef wrapper to Composer component
• Expose focusSendBoxInput() method via ComposerRef
• Export ComposerRef type for TypeScript consumers
• Leverages existing useFocus('sendBox') infrastructure
• Returns Promise for async focus handling

Fixes #

Changelog Entry

Description

Design

Specific Changes

-

• [ ] I have added tests and executed them locally
• [ ] I have updated CHANGELOG.md
• [ ] I have updated documentation

Review Checklist

This section is for contributors to review your work.

• [ ] Accessibility reviewed (tab order, content readability, alt text, color contrast)
• [ ] Browser and platform compatibilities reviewed
• [ ] CSS styles reviewed (minimal rules, no z-index)
• [ ] Documents reviewed (docs, samples, live demo)
• [ ] Internationalization reviewed (strings, unit formatting)
• [ ] package.json and package-lock.json reviewed
• [ ] Security reviewed (no data URIs, check for nonce leak)
• [ ] Tests reviewed (coverage, legitimacy)

[marclundgren]

Composer Ref API Documentation

Overview

The Composer component now supports a ref that exposes a focusSendBoxInput() method, allowing parent applications to programmatically focus the send box input field.

Usage Examples

TypeScript

import { useRef } from 'react';
import { Components, ComposerRef } from 'botframework-webchat-component';

const { Composer } = Components;

function MyApp() {
  const composerRef = useRef<ComposerRef>(null);

  const handleFocusSendBox = async () => {
    await composerRef.current?.focusSendBoxInput();
  };

  return (
    <div>
      <button onClick={handleFocusSendBox}>Focus Send Box</button>
      <Composer
        ref={composerRef}
        directLine={directLine}
        // ... other props
      />
    </div>
  );
}

JavaScript

import { useRef } from 'react';
import { Components } from 'botframework-webchat-component';

const { Composer } = Components;

function MyApp() {
  const composerRef = useRef(null);

  const handleFocusSendBox = async () => {
    await composerRef.current?.focusSendBoxInput();
  };

  return (
    <div>
      <button onClick={handleFocusSendBox}>Focus Send Box</button>
      <Composer
        ref={composerRef}
        directLine={directLine}
        // ... other props
      />
    </div>
  );
}

API Reference

ComposerRef

The ref object exposed by the Composer component.

Methods

• focusSendBoxInput(): Promise<void>
  • Programmatically focuses the send box input field
  • Activates the virtual keyboard on devices that have one
  • Returns a Promise that resolves when the focus operation completes

Implementation Details

• The ref API uses the existing useFocus('sendBox') hook internally
• Focusing the send box will activate virtual keyboards on mobile devices
• The method returns a Promise for async completion handling
• The implementation is minimal and leverages existing focus infrastructure
• Works with both the component package and full bundle package through ref forwarding