Fix a few ui edge cases - refresh occasionally crashing, chat loader over text and chat input height returning to auto (#3469)

ui/desktop/src/components/BaseChat.tsx

@@ -446,9 +446,6 @@ function BaseChatContent({
 
             {/* Custom content after messages */}
             {renderAfterMessages && renderAfterMessages()}
-
-            {/* Bottom padding to make space for the loading indicator */}
-            <div className="block h-20" />
           </ScrollArea>
 
           {/* Fixed loading indicator at bottom left of chat container */}

ui/desktop/src/components/ChatInput.tsx

@@ -427,7 +427,6 @@ export default function ChatInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [numTokens, toolCount, tokenLimit, isTokenLimitLoaded, addAlert, clearAlerts]);
 
-  const minHeight = '1rem';
   const maxHeight = 10 * 24;
 
   // Debounced function to update actual value
@@ -456,6 +455,13 @@ export default function ChatInput({
     }
   }, [debouncedAutosize, displayValue]);
 
+  // Reset textarea height when displayValue is empty
+  useEffect(() => {
+    if (textAreaRef.current && displayValue === '') {
+      textAreaRef.current.style.height = 'auto';
+    }
+  }, [displayValue]);
+
   const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
     const val = evt.target.value;
     const cursorPosition = evt.target.selectionStart;
@@ -910,7 +916,6 @@ export default function ChatInput({
               ref={textAreaRef}
               rows={1}
               style={{
-                minHeight: `${minHeight}px`,
                 maxHeight: `${maxHeight}px`,
                 overflowY: 'auto',
                 opacity: isRecording ? 0 : 1,

ui/desktop/src/components/pair.tsx

@@ -199,7 +199,7 @@ export default function Pair({
         onMessageStreamFinish={handleMessageStreamFinish}
         renderBeforeMessages={renderBeforeMessages}
         customChatInputProps={customChatInputProps}
-        contentClassName={cn('pr-1', (isMobile || sidebarState === 'collapsed') && 'pt-11')} // Use dynamic content class with mobile margin and sidebar state
+        contentClassName={cn('pr-1 pb-10', (isMobile || sidebarState === 'collapsed') && 'pt-11')} // Use dynamic content class with mobile margin and sidebar state
         showPopularTopics={!isTransitioningFromHub} // Don't show popular topics while transitioning from Hub
         suppressEmptyState={isTransitioningFromHub} // Suppress all empty state content while transitioning from Hub
       />

ui/desktop/src/components/sessions/SessionsInsights.tsx

@@ -23,6 +23,7 @@ export function SessionInsights() {
   const [error, setError] = useState<string | null>(null);
   const [recentSessions, setRecentSessions] = useState<Session[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingSessions, setIsLoadingSessions] = useState(true);
   // const [recentProjects, setRecentProjects] = useState<ProjectMetadata[]>([]);
   const navigate = useNavigate();
 
@@ -67,7 +68,8 @@ export function SessionInsights() {
         setRecentSessions(sessions.slice(0, 3));
       } catch (error) {
         console.error('Failed to load recent sessions:', error);
-        // Don't set loading to false here since insights is the primary data
+      } finally {
+        setIsLoadingSessions(false);
       }
     };
 
@@ -400,7 +402,32 @@ export function SessionInsights() {
                 </Button>
               </div>
               <div className="space-y-1 min-h-[96px] transition-all duration-300 ease-in-out">
-                {recentSessions.length > 0 ? (
+                {isLoadingSessions ? (
+                  // Show skeleton while sessions are loading
+                  <>
+                    <div className="flex items-center justify-between py-1 px-2">
+                      <div className="flex items-center space-x-2">
+                        <Skeleton className="h-4 w-4 rounded-sm" />
+                        <Skeleton className="h-4 w-48" />
+                      </div>
+                      <Skeleton className="h-4 w-16" />
+                    </div>
+                    <div className="flex items-center justify-between py-1 px-2">
+                      <div className="flex items-center space-x-2">
+                        <Skeleton className="h-4 w-4 rounded-sm" />
+                        <Skeleton className="h-4 w-40" />
+                      </div>
+                      <Skeleton className="h-4 w-16" />
+                    </div>
+                    <div className="flex items-center justify-between py-1 px-2">
+                      <div className="flex items-center space-x-2">
+                        <Skeleton className="h-4 w-4 rounded-sm" />
+                        <Skeleton className="h-4 w-52" />
+                      </div>
+                      <Skeleton className="h-4 w-16" />
+                    </div>
+                  </>
+                ) : recentSessions.length > 0 ? (
                   recentSessions.map((session, index) => (
                     <div
                       key={session.id}