diff --git a/src/games/storywriter/components/chat-sidebar.tsx b/src/games/storywriter/components/chat-sidebar.tsx
index 61cfe53..bf93998 100644
--- a/src/games/storywriter/components/chat-sidebar.tsx
+++ b/src/games/storywriter/components/chat-sidebar.tsx
@@ -10,6 +10,7 @@ import Prompt from "../utils/prompt";
 import { Tools } from "../utils/tools";
 import { Sparkles } from "lucide-preact";
 import clsx from "clsx";
+import { ContentEditable } from "@common/components/ContentEditable";
 
 // ─── Role Header ──────────────────────────────────────────────────────────────
 
@@ -350,13 +351,18 @@ export const ChatSidebar = () => {
                                 </button>
                             </div>
                         </div>
-                        <textarea
+                        <ContentEditable
+                            autoLines
                             class={styles.input}
                             value={input}
                             onInput={setInput}
                             onKeyDown={handleKeyDown}
-                            placeholder={isDisabled ? 'Connect to an LLM server to chat' : 'Type a message...'}
-                            rows={3}
+                            placeholder={
+                                isLoading
+                                    ? 'Generating...'
+                                    : isDisabled
+                                        ? 'Connect to an LLM server to chat'
+                                        : 'Type a message...'}
                             disabled={isDisabled}
                         />
                         {isLoading ? (