fix: don't disable input while waiting for session + persist drafts (#107)

* fix: don't disable input while waiting for session + persist drafts

Previously, the input was disabled when hasSession was false, showing
'Waiting for chat session to be established...' which could leave
users stuck unable to type.

Changes:
- Remove hasSession check from isDisabled condition
- Remove hasSession-based placeholder message
- Add localStorage persistence for message drafts per conversation
- Drafts are cleared automatically when message is sent

This allows users to start typing immediately while the session
establishes in the background. If they try to send before the session
is ready, they'll get an error toast rather than being blocked.

Fixes #58

* fix: remove unused _hasSession variable to fix TypeScript error

* fix: remove unused hasSession$ prop from ChatInput

Previously ChatInput accepted hasSession$ prop to control when input
was enabled. After the last change that removed the hasSession check
from isDisabled, this prop became unused but was still in the interface.

This commit:
- Removes hasSession$ from ChatInput Props interface
- Removes hasSession$ from component destructuring
- Removes hasSession$ prop from ConversationContent and WelcomeView
- Removes unused hasSession$ variable from WelcomeView

Fixes TypeScript error TS6133: 'hasSession$' is declared but never read

* fix: preserve draft in localStorage until overwritten to prevent data loss

Previously, drafts were cleared from localStorage immediately when the
message field became empty (after submit). This caused data loss if the
send operation failed, as the draft was already gone.

Now we only persist non-empty messages without auto-clearing. The draft
remains in localStorage until the user types a new message, ensuring
it's recoverable if send fails.

Addresses Greptile review feedback on PR #107.

Author: gptme-thomas

src/components/ChatInput.tsx

@@ -31,7 +31,6 @@ interface Props {
   isReadOnly?: boolean;
   defaultModel?: string;
   autoFocus$: Observable<boolean>;
-  hasSession$: Observable<boolean>;
   value?: string;
   onChange?: (value: string) => void;
 }
@@ -206,7 +205,6 @@ export const ChatInput: FC<Props> = ({
   isReadOnly,
   defaultModel = '',
   autoFocus$,
-  hasSession$,
   value,
   onChange,
 }) => {
@@ -221,9 +219,26 @@ export const ChatInput: FC<Props> = ({
   const conversation$ = conversationId ? conversations$.get(conversationId) : null;
   const conversationModel = conversation$?.chatConfig?.get()?.chat?.model;
 
-  const [internalMessage, setInternalMessage] = useState('');
+  // Initialize message from localStorage for persistence across page reloads
+  const storageKey = conversationId ? `gptme-draft-${conversationId}` : 'gptme-draft-new';
+  const [internalMessage, setInternalMessage] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem(storageKey) || '';
+    }
+    return '';
+  });
   const [streamingEnabled, setStreamingEnabled] = useState(true);
 
+  // Persist message to localStorage when it changes
+  // Note: We only save non-empty messages, we don't clear on empty.
+  // This ensures drafts persist until a new message is typed, preventing
+  // data loss if send fails (the draft would already be cleared otherwise).
+  useEffect(() => {
+    if (typeof window !== 'undefined' && internalMessage) {
+      localStorage.setItem(storageKey, internalMessage);
+    }
+  }, [internalMessage, storageKey]);
+
   // Track if user has explicitly selected a model (temporary override)
   const [hasExplicitModelSelection, setHasExplicitModelSelection] = useState(false);
   const [selectedModel, setSelectedModel] = useState('');
@@ -273,17 +288,15 @@ export const ChatInput: FC<Props> = ({
   const autoFocus = use$(autoFocus$);
   const conversation = conversationId ? use$(conversations$.get(conversationId)) : undefined;
   const isGenerating = conversation?.isGenerating || !!conversation?.executingTool;
-  const hasSession = use$(hasSession$);
-
   const placeholder = isReadOnly
     ? 'This is a demo conversation (read-only)'
     : !isConnected
       ? 'Connect to gptme to send messages'
-      : !hasSession
-        ? 'Waiting for chat session to be established...'
-        : "What's on your mind...";
+      : "What's on your mind...";
 
-  const isDisabled = isReadOnly || !isConnected || !hasSession;
+  // Don't disable input while waiting for session - let users type
+  // Session will be established by the time they finish typing
+  const isDisabled = isReadOnly || !isConnected;
 
   // Focus the textarea when autoFocus is true and component is interactive
   useEffect(() => {

src/components/ConversationContent.tsx

@@ -249,7 +249,6 @@ export const ConversationContent: FC<Props> = ({ conversationId, isReadOnly }) =
             onSend={handleSendMessage}
             onInterrupt={interruptGeneration}
             isReadOnly={isReadOnly}
-            hasSession$={hasSession$}
             defaultModel={defaultModel || undefined}
             autoFocus$={shouldFocus$}
           />

src/components/WelcomeView.tsx

@@ -20,7 +20,6 @@ export const WelcomeView = ({ onToggleHistory }: { onToggleHistory: () => void }
 
   // Create observables that ChatInput expects
   const autoFocus$ = observable(true);
-  const hasSession$ = observable(true); // Always true for welcome view
 
   const handleSend = async (message: string, options?: ChatOptions) => {
     if (!message.trim() || !isConnected) return;
@@ -97,7 +96,6 @@ export const WelcomeView = ({ onToggleHistory }: { onToggleHistory: () => void }
         <ChatInput
           onSend={handleSend}
           autoFocus$={autoFocus$}
-          hasSession$={hasSession$}
           value={inputValue}
           onChange={setInputValue}
         />