Implement initial project structure and features for Automaker application, including environment setup, auto mode services, and session management. Update port configurations to 3007 and add new UI components for enhanced user interaction.

app/src/hooks/use-message-queue.ts

@@ -0,0 +1,81 @@
+import { useState, useCallback } from 'react';
+import type { ImageAttachment } from '@/store/app-store';
+
+export interface QueuedMessage {
+  id: string;
+  content: string;
+  images?: ImageAttachment[];
+  timestamp: Date;
+}
+
+interface UseMessageQueueOptions {
+  onProcessNext: (message: QueuedMessage) => Promise<void>;
+}
+
+interface UseMessageQueueResult {
+  queuedMessages: QueuedMessage[];
+  isProcessingQueue: boolean;
+  addToQueue: (content: string, images?: ImageAttachment[]) => void;
+  clearQueue: () => void;
+  removeFromQueue: (messageId: string) => void;
+  processNext: () => Promise<void>;
+}
+
+/**
+ * React hook for managing a queue of messages to be sent to the agent
+ *
+ * This allows users to queue up multiple messages while one is being processed,
+ * improving the chat experience by removing blocking behavior.
+ */
+export function useMessageQueue({ onProcessNext }: UseMessageQueueOptions): UseMessageQueueResult {
+  const [queuedMessages, setQueuedMessages] = useState<QueuedMessage[]>([]);
+  const [isProcessingQueue, setIsProcessingQueue] = useState(false);
+
+  const addToQueue = useCallback((content: string, images?: ImageAttachment[]) => {
+    const queuedMessage: QueuedMessage = {
+      id: `queued-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      content: content.trim(),
+      images,
+      timestamp: new Date(),
+    };
+
+    setQueuedMessages(prev => [...prev, queuedMessage]);
+  }, []);
+
+  const removeFromQueue = useCallback((messageId: string) => {
+    setQueuedMessages(prev => prev.filter(msg => msg.id !== messageId));
+  }, []);
+
+  const clearQueue = useCallback(() => {
+    setQueuedMessages([]);
+  }, []);
+
+  const processNext = useCallback(async () => {
+    if (queuedMessages.length === 0 || isProcessingQueue) {
+      return;
+    }
+
+    const nextMessage = queuedMessages[0];
+    setIsProcessingQueue(true);
+
+    try {
+      await onProcessNext(nextMessage);
+      // Remove the processed message from queue
+      setQueuedMessages(prev => prev.slice(1));
+    } catch (error) {
+      console.error('Error processing queued message:', error);
+      // Keep the message in queue for retry or manual removal
+    } finally {
+      setIsProcessingQueue(false);
+    }
+  }, [queuedMessages, isProcessingQueue, onProcessNext]);
+
+  return {
+    queuedMessages,
+    isProcessingQueue,
+    addToQueue,
+    clearQueue,
+    removeFromQueue,
+    processNext,
+  };
+}