Function ChatInput

src/web-ui/src/flow_chat/components/ChatInput.tsx:254–4085

({
  className = '',
  onSendMessage
})

}

export const ChatInput: React.FC<ChatInputProps> = ({
  className = '',
  onSendMessage
}) => {
  const { t } = useTranslation('flow-chat');
  
  const [inputState, dispatchInput] = useReducer(inputReducer, initialInputState);
  const [modeState, dispatchMode] = useReducer(modeReducer, initialModeState);
  
  const richTextInputRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const agentBoostRef = useRef<HTMLDivElement>(null);
  const isImeComposingRef = useRef(false);
  // Ref so the queuedInput sync effect can read the latest value without it being a dep
  const inputValueRef = useRef('');
  const pendingLargePastesRef = useRef<PendingLargePasteMap>({});
  const largePasteCountersRef = useRef<Record<number, number>>({});
  const undoImageStackRef = useRef<string[]>([]);
  
  // History navigation state
  const [historyIndex, setHistoryIndex] = useState(-1);
  const [savedDraft, setSavedDraft] = useState('');
  const [inputTarget, setInputTarget] = useState<ChatInputTarget>('main');
  const { addMessage: addToHistory, getSessionHistory } = useInputHistoryStore();
  
  const contexts = useContextStore(state => state.contexts);
  const addContext = useContextStore(state => state.addContext);
  const removeContext = useContextStore(state => state.removeContext);
  const clearContexts = useContextStore(state => state.clearContexts);

  const contextsRef = useRef(contexts);
  contextsRef.current = contexts;

  const imageContexts = useMemo(
    () => contexts.filter((c): c is ImageContext => c.type === 'image'),
    [contexts],
  );
  const currentImageCount = imageContexts.length;
  
  const activeSessionState = useActiveSessionState();
  const activeBtwSessionTab = useAgentCanvasStore(state => selectActiveBtwSessionTab(state as any));
  const [flowChatState, setFlowChatState] = useState<FlowChatState>(() => FlowChatStore.getInstance().getState());
  const currentSessionId = activeSessionState.sessionId;
  const currentSession = currentSessionId ? flowChatState.sessions.get(currentSessionId) : undefined;
  const activeBtwSessionData = activeBtwSessionTab?.content.data as
    | { childSessionId: string; parentSessionId: string; workspacePath?: string }
    | undefined;
  const activeBtwSessionId = activeBtwSessionData?.parentSessionId === currentSessionId
    ? activeBtwSessionData.childSessionId
    : undefined;
  const effectiveTargetSessionId =
    inputTarget === 'btw' && activeBtwSessionId ? activeBtwSessionId : currentSessionId;
  const effectiveTargetSession = effectiveTargetSessionId
    ? flowChatState.sessions.get(effectiveTargetSessionId)
    : undefined;
  const historySessionOpenTransition = useSyncExternalStore(
    subscribeHistorySessionOpenTransition,
    getHistorySessionOpenTransitionSnapshot,