kandev/apps/web/components/task/chat/use-chat-input-container.ts

"use client";

import { useCallback, useState, useEffect, useImperativeHandle } from "react";
import type React from "react";
import { useResizableInput } from "@/hooks/use-resizable-input";
import { useChatInputState } from "./use-chat-input-state";
import type { QueuedMessageIndicatorHandle } from "./queued-message-indicator";
import type { TipTapInputHandle } from "./tiptap-input";
import type { ContextItem } from "@/lib/types/context";
import type { ContextFile } from "@/lib/state/context-files-store";
import type { Message } from "@/lib/types/http";
import type { DiffComment } from "@/lib/diff/types";
import type { MessageAttachment, ChatInputContainerHandle } from "./chat-input-container";

type UseChatInputContainerParams = {
  ref: React.ForwardedRef<ChatInputContainerHandle>;
  sessionId: string | null;
  isSending: boolean;
  isStarting: boolean;
  isFailed: boolean;
  isAgentBusy: boolean;
  hasAgentCommands: boolean;
  isQueued: boolean;
  placeholder: string | undefined;
  contextItems: ContextItem[];
  pendingClarification: Message | null | undefined;
  onClarificationResolved: (() => void) | undefined;
  pendingCommentsByFile: Record<string, DiffComment[]> | undefined;
  queuedMessage: string | null | undefined;
  onCancelQueue: (() => void) | undefined;
  updateQueueContent: ((content: string) => Promise<void>) | undefined;
  todoItems: { text: string; done?: boolean }[];
  showRequestChangesTooltip: boolean;
  onRequestChangesTooltipDismiss: (() => void) | undefined;
  onSubmit: (
    message: string,
    reviewComments?: DiffComment[],
    attachments?: MessageAttachment[],
    inlineMentions?: ContextFile[],
  ) => void;
  queuedMessageRef?: React.RefObject<QueuedMessageIndicatorHandle | null>;
};

function useInputHandle(
  ref: React.ForwardedRef<ChatInputContainerHandle>,
  inputRef: React.RefObject<TipTapInputHandle | null>,
) {
  useImperativeHandle(
    ref,
    () => ({
      focusInput: () => inputRef.current?.focus(),
      getTextareaElement: () => inputRef.current?.getTextareaElement() ?? null,
      getValue: () => inputRef.current?.getValue() ?? "",
      getSelectionStart: () => inputRef.current?.getSelectionStart() ?? 0,
      insertText: (text: string, from: number, to: number) => {
        inputRef.current?.insertText(text, from, to);
      },
    }),
    [inputRef],
  );
}

function getInputPlaceholder(
  placeholder: string | undefined,
  isAgentBusy: boolean,
  hasAgentCommands: boolean,
): string {
  if (placeholder) return placeholder;
  if (isAgentBusy) return "Queue more instructions...";
  if (hasAgentCommands) return "Ask to make changes, @mention files, run /commands";
  return "Ask to make changes, @mention files";
}

function computeDerivedState(params: {
  isStarting: boolean;
  isSending: boolean;
  isFailed: boolean;
  pendingClarification: Message | null | undefined;
  onClarificationResolved: (() => void) | undefined;
  pendingCommentsByFile: Record<string, DiffComment[]> | undefined;
  isQueued: boolean;
  queuedMessage: string | null | undefined;
  onCancelQueue: (() => void) | undefined;
  updateQueueContent: ((content: string) => Promise<void>) | undefined;
  todoItems: { text: string }[];
  allItemsLength: number;
  isInputFocused: boolean;
  placeholder: string | undefined;
  isAgentBusy: boolean;
  hasAgentCommands: boolean;
}) {
  const isDisabled = params.isStarting || params.isSending || params.isFailed;
  const hasClarification = !!(params.pendingClarification && params.onClarificationResolved);
  const hasPendingComments = !!(
    params.pendingCommentsByFile && Object.keys(params.pendingCommentsByFile).length > 0
  );
  const hasQueuedMessage = !!(
    params.isQueued &&
    params.queuedMessage &&
    params.onCancelQueue &&
    params.updateQueueContent
  );
  const hasTodos = params.todoItems.length > 0;
  const hasContextZone =
    hasQueuedMessage || hasTodos || params.allItemsLength > 0 || hasClarification;
  const showFocusHint = !params.isInputFocused && !hasClarification && !hasPendingComments;
  const inputPlaceholder = getInputPlaceholder(
    params.placeholder,
    params.isAgentBusy,
    params.hasAgentCommands,
  );
  return {
    isDisabled,
    hasClarification,
    hasPendingComments,
    hasQueuedMessage,
    hasTodos,
    hasContextZone,
    showFocusHint,
    inputPlaceholder,
  };
}

export function useChatInputContainer(params: UseChatInputContainerParams) {
  const {
    ref,
    sessionId,
    isSending,
    isStarting,
    isFailed,
    isAgentBusy,
    hasAgentCommands,
    isQueued,
    placeholder,
    contextItems,
    pendingClarification,
    onClarificationResolved,
    pendingCommentsByFile,
    queuedMessage,
    onCancelQueue,
    updateQueueContent,
    todoItems,
    showRequestChangesTooltip,
    onRequestChangesTooltipDismiss,
    onSubmit,
  } = params;

  const [isInputFocused, setIsInputFocused] = useState(false);
  const [showNewSessionDialog, setShowNewSessionDialog] = useState(false);
  const [contextPopoverOpen, setContextPopoverOpen] = useState(false);

  const { height, resetHeight, containerRef, resizeHandleProps } = useResizableInput(
    sessionId ?? undefined,
  );
  const { value, inputRef, handleImagePaste, handleChange, handleSubmit, allItems } =
    useChatInputState({
      sessionId,
      isSending,
      contextItems,
      pendingCommentsByFile,
      showRequestChangesTooltip,
      onRequestChangesTooltipDismiss,
      onSubmit,
    });

  useInputHandle(ref, inputRef);

  useEffect(() => {
    if (showRequestChangesTooltip && inputRef.current) inputRef.current.focus();
  }, [showRequestChangesTooltip, inputRef]);

  const handleAgentCommand = useCallback(
    (commandName: string) => {
      onSubmit(`/${commandName}`);
    },
    [onSubmit],
  );
  const handleSubmitWithReset = useCallback(
    () => handleSubmit(resetHeight),
    [handleSubmit, resetHeight],
  );

  const derived = computeDerivedState({
    isStarting,
    isSending,
    isFailed,
    pendingClarification,
    onClarificationResolved,
    pendingCommentsByFile,
    isQueued,
    queuedMessage,
    onCancelQueue,
    updateQueueContent,
    todoItems,
    allItemsLength: allItems.length,
    isInputFocused,
    placeholder,
    isAgentBusy,
    hasAgentCommands,
  });

  return {
    isInputFocused,
    setIsInputFocused,
    showNewSessionDialog,
    setShowNewSessionDialog,
    contextPopoverOpen,
    setContextPopoverOpen,
    height,
    containerRef,
    resizeHandleProps,
    value,
    inputRef,
    handleImagePaste,
    handleChange,
    handleSubmitWithReset,
    handleAgentCommand,
    allItems,
    ...derived,
  };
}

export type { TipTapInputHandle };