# Initialize HAX in your project
hax init

# Add the composer system
hax add composer chat-commands

import { CommandRegistryProvider, useChatCommands, CommandSuggestions, CommandHints } from "@/hax/composer/chat-commands";

export function EnhancedChat() {
  const { commandType, showSuggestions, detectCommand } = useChatCommands();

  return (
    <CommandRegistryProvider>
      <div className="chat-interface">
        <CommandHints showSuggestions={showSuggestions} />
        <textarea
          onChange={(e) => detectCommand(e.target.value, e.target.selectionStart)}
        />
        <CommandSuggestions
          showSuggestions={showSuggestions}
          commandType={commandType}
        />
      </div>
    </CommandRegistryProvider>
  );
}