GPT

Example Components

import { useCollectionRealtime, useDocumentMutation } from '../hooks/firebase'; interface Message { id: string; text: string; userId: string; createdAt: number; } function ChatRoom({ roomId }: { roomId: string }) {

Prompt text

Original English text. Replace placeholders with your own details.

import { useCollectionRealtime, useDocumentMutation } from '../hooks/firebase';

interface Message {
 id: string;
 text: string;
 userId: string;
 createdAt: number;
}

function ChatRoom({ roomId }: { roomId: string }) {
 const { data: messages, isLoading } = useCollectionRealtime<Message>('messages', {
 where: [['roomId', '==', roomId]],
 orderBy: [['createdAt', 'desc']],
 limit: 50
 });

 const mutation = useDocumentMutation<Message>('messages');

 const sendMessage = async (text: string) => {
 try {
 await mutation.mutateAsync({
 id: Date.now().toString(),
 data: {
 text,
 roomId,
 userId: 'current-user-id', // Replace with actual user ID
 createdAt: Date.now()
 }
 });
 } catch (error) {
 console.error('Failed to send message:', error);
 }
 };

 if (isLoading) return <div>Loading...</div>;

 return (
 <div>
 <div className="messages">
 {messages?.map(message => (
 <div key={message.id} className="message">
 <span>{message.text}</span>
 <small>{new Date(message.createdAt).toLocaleString()}</small>
 </div>
 ))}
 </div>
 <form onSubmit={(e) => {
 e.preventDefault();
 const input = e.currentTarget.elements.namedItem('message') as HTMLInputElement;
 if (input.value.trim()) {
 sendMessage(input.value);
 input.value = '';
 }
 }}>
 <input
 type="text"
 name="message"
 placeholder="Type a message..."
 disabled={mutation.isPending}
 />
 <button type="submit" disabled={mutation.isPending}>
 Send
 </button>
 </form>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →