Function AppCommand

apps/examples/calcom/components/app/app-command.tsx:258–745

()

  CommandCreateHandle();

export function AppCommand(): React.ReactElement {
  const [open, setOpen] = React.useState(false);
  const [aiState, setAIState] = React.useState<AIState>(initialAIState);
  const [searchQuery, setSearchQuery] = React.useState("");
  const aiInputRef = React.useRef<HTMLInputElement>(null);
  const searchInputRef = React.useRef<HTMLInputElement>(null);
  const abortControllerRef = React.useRef<AbortController | null>(null);
  const commandResetKeyRef = React.useRef(0);

  // Cleanup on unmount
  React.useEffect((): (() => void) => {
    return (): void => {
      abortControllerRef.current?.abort();
    };
  }, []);

  const resetAIState = React.useCallback(() => {
    abortControllerRef.current?.abort();
    setAIState(initialAIState);
  }, []);

  const handleItemClick = React.useCallback(() => {
    setOpen(false);
  }, []);

  const handleBackToSearch = React.useCallback(() => {
    resetAIState();
    setSearchQuery("");
    // Force Command remount to reset Autocomplete's internal query state
    commandResetKeyRef.current += 1;
    // Focus search input after state updates
    searchInputRef.current?.focus();
  }, [resetAIState]);

  const handleGenerateAI = React.useCallback(
    async (queryOverride?: string) => {
      const query = queryOverride || aiState.query;
      if (!query.trim()) return;

      // Abort any ongoing request
      abortControllerRef.current?.abort();
      const controller = new AbortController();
      abortControllerRef.current = controller;

      setAIState((prev) => ({
        ...prev,
        error: null,
        isGenerating: true,
        query: "",
        referenceLinks: [],
        response: "",
        submittedQuery: query,
      }));

      try {
        // Simulate AI response - in production, this would call an API
        await new Promise<void>((resolve, reject) => {
          const timeout = setTimeout(resolve, 1500);