AI Chat Input

Installation

Usage

import AiChatInput from "@/components/ruixen/ai-chat-input";
 
export default function App() {
  const handleSendMessage = (message: string) => {
    console.log("Sending message:", message);
  };
 
  const handleUploadFile = (file: File) => {
    console.log("Uploading file:", file.name);
  };
 
  return (
    <AiChatInput
      onSendMessage={handleSendMessage}
      onUploadFile={handleUploadFile}
      isLoading={false}
    />
  );
}

Props

Features

• Slash Commands: Type "/" to open command picker
• Command Tags: Selected commands appear as removable badges
• Emoji Picker: Click emoji button to add emojis
• File Upload: Paperclip icon for file attachments
• Auto-resize: Textarea grows with content
• Keyboard Shortcuts: Enter to send, Shift+Enter for new line
• Loading State: Shows stop button when processing

Available Commands

• Summarize: /summarize - Summarize content
• Translate: /translate - Translate text
• Explain: /explain - Explain concepts

Keyboard Shortcuts

• Enter: Send message
• Shift + Enter: New line
• / : Open command picker
• Escape: Close popovers