feat: add more context to chat

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/index.tsx

@@ -93,7 +93,7 @@ export const ChatInput = observer(({
         return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
     }, []);
 
-    const disabled = isStreaming
+    const disabled = false; // Allow input while streaming
     const inputEmpty = !inputValue || inputValue.trim().length === 0;
 
     function handleInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
@@ -136,22 +136,33 @@ export const ChatInput = observer(({
             console.warn('Empty message');
             return;
         }
-        if (isStreaming) {
-            console.warn('Already waiting for response');
-            return;
-        }
+
         const savedInput = inputValue.trim();
+
         try {
-            await onSendMessage(savedInput, chatMode);
+            if (isStreaming) {
+                // Queue the message if streaming
+                const queuedMessage = editorEngine.chat.queue.enqueue(savedInput, chatMode);
+                console.log('Message queued:', queuedMessage);
+            } else {
+                // Send immediately if not streaming
+                await onSendMessage(savedInput, chatMode);
+            }
+            // Clear input
             setInputValue('');
         } catch (error) {
             console.error('Error sending message', error);
             toast.error('Failed to send message. Please try again.');
-            setInputValue(savedInput);
         }
     }
 
     const getPlaceholderText = () => {
+        if (isStreaming && editorEngine.chat.queue.length > 0) {
+            return `${editorEngine.chat.queue.length} message${editorEngine.chat.queue.length > 1 ? 's' : ''} queued - type to add more...`;
+        }
+        if (isStreaming) {
+            return 'Type to queue message while AI responds...';
+        }
         if (chatMode === ChatType.ASK) {
             return 'Ask a question about your project...';
         }
@@ -422,10 +433,11 @@ export const ChatInput = observer(({
                             size={'icon'}
                             variant={'secondary'}
                             className="text-smallPlus w-fit h-full py-0.5 px-2.5 text-primary"
-                            disabled={inputEmpty || disabled}
+                            disabled={inputEmpty}
                             onClick={() => void sendMessage()}
+                            title={isStreaming ? 'Queue message' : 'Send message'}
                         >
-                            <Icons.ArrowRight />
+                            {isStreaming ? <Icons.CounterClockwiseClock /> : <Icons.ArrowRight />}
                         </Button>
                     )}
                 </div>

apps/web/client/src/app/project/[id]/_hooks/use-chat/index.tsx

@@ -208,15 +208,20 @@ export function useChat({ conversationId, projectId, initialMessages }: UseChatP
                 );
             };
 
-            const cleanupContext = async () => {
-                await editorEngine.chat.context.clearImagesFromContext();
+            const cleanupContext = () => {
+                editorEngine.chat.context.clearImagesFromContext();
             };
 
             void cleanupContext();
             void fetchSuggestions();
             void applyCommit();
+
+            // Process any queued messages
+            setTimeout(() => {
+                void editorEngine.chat.queue.processNext();
+            }, 500);
         }
-    }, [finishReason, conversationId]);
+    }, [finishReason, conversationId, editorEngine.chat.queue, editorEngine.chat.context, editorEngine.versions, setMessages]);
 
     useEffect(() => {
         editorEngine.chat.conversation.setConversationLength(messages.length);

apps/web/client/src/components/store/editor/chat/index.ts

@@ -4,11 +4,13 @@ import { makeAutoObservable } from 'mobx';
 import type { EditorEngine } from '../engine';
 import { ChatContext } from './context';
 import { ConversationManager } from './conversation';
+import { MessageQueue } from './queue';
 
 export const FOCUS_CHAT_INPUT_EVENT = 'focus-chat-input';
 export class ChatManager {
     conversation: ConversationManager;
     context: ChatContext;
+    queue: MessageQueue;
 
     // Content sent from useChat hook
     _sendMessageAction: SendMessage | null = null;
@@ -17,6 +19,7 @@ export class ChatManager {
     constructor(private editorEngine: EditorEngine) {
         this.context = new ChatContext(this.editorEngine);
         this.conversation = new ConversationManager(this.editorEngine);
+        this.queue = new MessageQueue(this.editorEngine);
         makeAutoObservable(this);
     }
 
@@ -51,5 +54,6 @@ export class ChatManager {
     clear() {
         this.context.clear();
         this.conversation.clear();
+        this.queue.clear();
     }
 }

apps/web/client/src/components/store/editor/chat/queue.ts

@@ -0,0 +1,93 @@
+import { type ChatType } from '@onlook/models';
+import { makeAutoObservable } from 'mobx';
+import type { EditorEngine } from '../engine';
+
+export interface QueuedMessage {
+    content: string;
+    type: ChatType;
+    id: string;
+    timestamp: number;
+}
+
+export class MessageQueue {
+    private _queue: QueuedMessage[] = [];
+    private _isProcessing = false;
+
+    constructor(private editorEngine: EditorEngine) {
+        makeAutoObservable(this);
+    }
+
+    get queue(): QueuedMessage[] {
+        return [...this._queue];
+    }
+
+    get length(): number {
+        return this._queue.length;
+    }
+
+    get isProcessing(): boolean {
+        return this._isProcessing;
+    }
+
+    get isEmpty(): boolean {
+        return this._queue.length === 0;
+    }
+
+    enqueue(content: string, type: ChatType): QueuedMessage {
+        const message: QueuedMessage = {
+            content: content.trim(),
+            type,
+            id: `queued_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            timestamp: Date.now(),
+        };
+
+        this._queue.push(message);
+        return message;
+    }
+
+    dequeue(): QueuedMessage | null {
+        return this._queue.shift() || null;
+    }
+
+    removeMessage(id: string): boolean {
+        const index = this._queue.findIndex(msg => msg.id === id);
+        if (index !== -1) {
+            this._queue.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+
+    clear(): void {
+        this._queue = [];
+        this._isProcessing = false;
+    }
+
+    async processNext(): Promise<void> {
+        if (this._isProcessing || this.isEmpty || this.editorEngine.chat.isStreaming) {
+            return;
+        }
+
+        this._isProcessing = true;
+
+        const nextMessage = this.dequeue();
+        if (!nextMessage) {
+            this._isProcessing = false;
+            return;
+        }
+
+        try {
+            await this.editorEngine.chat.sendMessage(nextMessage.content, nextMessage.type);
+        } catch (error) {
+            console.error('Error processing queued message:', error);
+        } finally {
+            this._isProcessing = false;
+        }
+    }
+
+    async processAll(): Promise<void> {
+        while (!this.isEmpty && !this.editorEngine.chat.isStreaming) {
+            await this.processNext();
+        }
+    }
+}