Refactor chat input & properly update state for proposal

src/components/chat/ChatInput.tsx

@@ -11,12 +11,12 @@ import {
   Loader2,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ModelPicker } from "@/components/ModelPicker";
 import { useSettings } from "@/hooks/useSettings";
 import { IpcClient } from "@/ipc/ipc_client";
-import { chatInputValueAtom } from "@/atoms/chatAtoms";
-import { useAtom } from "jotai";
+import { chatInputValueAtom, chatMessagesAtom } from "@/atoms/chatAtoms";
+import { useAtom, useSetAtom } from "jotai";
 import { useStreamChat } from "@/hooks/useStreamChat";
 import { useChats } from "@/hooks/useChats";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
@@ -26,7 +26,8 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useProposal } from "@/hooks/useProposal";
 import { Proposal } from "@/lib/schemas";
-
+import type { Message } from "@/ipc/ipc_types";
+import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
 interface ChatInputActionsProps {
   proposal: Proposal;
   onApprove: () => void;
@@ -36,12 +37,7 @@ interface ChatInputActionsProps {
   isRejecting: boolean; // State for rejecting
 }
 
-interface ChatInputProps {
-  chatId?: number;
-  onSubmit?: () => void;
-}
-
-export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
+export function ChatInput({ chatId }: { chatId?: number }) {
   const [inputValue, setInputValue] = useAtom(chatInputValueAtom);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { settings, updateSettings, isAnyProviderSetup } = useSettings();
@@ -51,6 +47,8 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
   const [showError, setShowError] = useState(true);
   const [isApproving, setIsApproving] = useState(false); // State for approving
   const [isRejecting, setIsRejecting] = useState(false); // State for rejecting
+  const [messages, setMessages] = useAtom<Message[]>(chatMessagesAtom);
+  const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
 
   // Use the hook to fetch the proposal
   const {
@@ -80,10 +78,19 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
     }
   }, [error]);
 
+  const fetchChatMessages = useCallback(async () => {
+    if (!chatId) {
+      setMessages([]);
+      return;
+    }
+    const chat = await IpcClient.getInstance().getChat(chatId);
+    setMessages(chat.messages);
+  }, [chatId, setMessages]);
+
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      submitHandler();
+      handleSubmit();
     }
   };
 
@@ -96,7 +103,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
     setInputValue("");
     await streamMessage({ prompt: currentInput, chatId });
   };
-  const submitHandler = onSubmit ? onSubmit : handleSubmit;
 
   const handleCancel = () => {
     if (chatId) {
@@ -133,7 +139,9 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
       setError((err as Error)?.message || "An error occurred while approving");
     } finally {
       setIsApproving(false);
+      setIsPreviewOpen(true);
       refreshProposal();
+      fetchChatMessages();
     }
   };
 
@@ -162,6 +170,7 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
     } finally {
       setIsRejecting(false);
       refreshProposal();
+      fetchChatMessages();
     }
   };
 
@@ -236,7 +245,7 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
               </button>
             ) : (
               <button
-                onClick={submitHandler}
+                onClick={handleSubmit}
                 disabled={!inputValue.trim() || !isAnyProviderSetup()}
                 className="px-2 py-2 mt-1 mr-2 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
               >

src/components/chat/HomeChatInput.tsx

@@ -0,0 +1,85 @@
+import { SendIcon, StopCircleIcon, X } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { ModelPicker } from "@/components/ModelPicker";
+import { useSettings } from "@/hooks/useSettings";
+import { homeChatInputValueAtom } from "@/atoms/chatAtoms"; // Use a different atom for home input
+import { useAtom } from "jotai";
+import { useStreamChat } from "@/hooks/useStreamChat";
+
+export function HomeChatInput({ onSubmit }: { onSubmit: () => void }) {
+  const [inputValue, setInputValue] = useAtom(homeChatInputValueAtom);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { settings, updateSettings, isAnyProviderSetup } = useSettings();
+  const { streamMessage, isStreaming, setIsStreaming } = useStreamChat(); // eslint-disable-line @typescript-eslint/no-unused-vars
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "0px";
+      const scrollHeight = textarea.scrollHeight;
+      textarea.style.height = `${scrollHeight + 4}px`;
+    }
+  };
+
+  useEffect(() => {
+    adjustHeight();
+  }, [inputValue]);
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+
+  if (!settings) {
+    return null; // Or loading state
+  }
+
+  return (
+    <>
+      <div className="p-4">
+        <div className="flex flex-col space-y-2 border border-border rounded-lg bg-(--background-lighter) shadow-sm">
+          <div className="flex items-start space-x-2 ">
+            <textarea
+              ref={textareaRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder="Ask Dyad to build..."
+              className="flex-1 p-2 focus:outline-none overflow-y-auto min-h-[40px] max-h-[200px]"
+              style={{ resize: "none" }}
+              disabled={isStreaming} // Should ideally reflect if *any* stream is happening
+            />
+            {isStreaming ? (
+              <button
+                className="px-2 py-2 mt-1 mr-2 text-(--sidebar-accent-fg) rounded-lg opacity-50 cursor-not-allowed" // Indicate disabled state
+                title="Cancel generation (unavailable here)"
+              >
+                <StopCircleIcon size={20} />
+              </button>
+            ) : (
+              <button
+                onClick={onSubmit}
+                disabled={!inputValue.trim() || !isAnyProviderSetup()}
+                className="px-2 py-2 mt-1 mr-2 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
+                title="Start new chat"
+              >
+                <SendIcon size={20} />
+              </button>
+            )}
+          </div>
+          <div className="px-2 pb-2">
+            <ModelPicker
+              selectedModel={settings.selectedModel}
+              onModelSelect={(model) =>
+                updateSettings({ selectedModel: model })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}