Function MessageInput

frontend/src/components/MessageInput.tsx:298–1687

({
  onSubmit,
  loading,
  showSourceButton = true,
  showToolButton = true,
  autoFocus = true,
}: MessageInputProps)

};

export default function MessageInput({
  onSubmit,
  loading,
  showSourceButton = true,
  showToolButton = true,
  autoFocus = true,
}: MessageInputProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState('');
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const voiceFileInputRef = useRef<HTMLInputElement>(null);
  const [isSourcesPopupOpen, setIsSourcesPopupOpen] = useState(false);
  const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
  const [userTools, setUserTools] = useState<UserToolType[]>([]);
  const [toolsLoading, setToolsLoading] = useState(false);
  const [uploadModalState, setUploadModalState] =
    useState<ActiveState>('INACTIVE');
  const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
  const [recordingState, setRecordingState] = useState<RecordingState>('idle');
  const [voiceError, setVoiceError] = useState<string | null>(null);

  const selectedDocs = useSelector(selectSelectedDocs);
  const sourceDocs = useSelector(selectSourceDocs);
  const token = useSelector(selectToken);
  const attachments = useSelector(selectAttachments);

  const dispatch = useDispatch();
  const store = useStore<RootState>();
  const mediaStreamRef = useRef<MediaStream | null>(null);
  const audioContextRef = useRef<AudioContext | null>(null);
  const audioSourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);
  const audioProcessorNodeRef = useRef<ScriptProcessorNode | null>(null);
  const audioSilenceGainRef = useRef<GainNode | null>(null);
  const snapshotIntervalRef = useRef<number | null>(null);
  const pcmChunksRef = useRef<Float32Array[]>([]);
  const totalBufferedSamplesRef = useRef(0);
  const totalCapturedSamplesRef = useRef(0);
  const lastSnapshotCapturedSamplesRef = useRef(0);
  const recentWindowRmsRef = useRef({ sumSquares: 0, sampleCount: 0 });
  const liveSessionIdRef = useRef<string | null>(null);
  const livePendingSnapshotRef = useRef<LiveAudioSnapshot | null>(null);
  const liveChunkIndexRef = useRef(0);
  const liveUploadInFlightRef = useRef(false);
  const liveStopRequestedRef = useRef(false);
  const voiceBaseValueRef = useRef('');
  const liveTranscriptRef = useRef('');

  const isTouch = isTouchDevice();

  const stopMediaStream = () => {
    mediaStreamRef.current?.getTracks().forEach((track) => track.stop());
    mediaStreamRef.current = null;
  };

  const stopAudioProcessing = () => {
    if (snapshotIntervalRef.current !== null) {
      window.clearInterval(snapshotIntervalRef.current);
      snapshotIntervalRef.current = null;