Integrate Resolution Search and UI Improvements

LICENSE

@@ -186,7 +186,7 @@ APPENDIX: How to apply the Apache License to your work.
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-Copyright 2024 Yoshiki Miura
+Copyright 2025 Eric Ngoiya
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

app/actions.tsx

@@ -93,7 +93,14 @@ async function submit(formData?: FormData, skip?: boolean) {
     // Create a streamable value for the summary.
     const summaryStream = createStreamableValue<string>('');
 
-    async function processResolutionSearch() {
+    // Immediately append the BotMessage component to the UI stream.
+    uiStream.append(
+      <Section title="response">
+        <BotMessage content={summaryStream.value} />
+      </Section>
+    );
+
+    (async () => {
       try {
         // Call the simplified agent, which now returns a stream.
         const streamResult = await resolutionSearch(messages, timezone, drawnFeatures);
@@ -109,7 +116,7 @@ async function submit(formData?: FormData, skip?: boolean) {
         const analysisResult = await streamResult.object;
 
         // Mark the summary stream as done with the result.
-        summaryStream.done(analysisResult.summary || 'Analysis complete.');
+        summaryStream.done(analysisResult.summary || fullSummary || 'Analysis complete.');
 
         messages.push({ role: 'assistant', content: analysisResult.summary || 'Analysis complete.' });
 
@@ -171,17 +178,7 @@ async function submit(formData?: FormData, skip?: boolean) {
         isGenerating.done(false);
         uiStream.done();
       }
-    }
-
-    // Start the background process without awaiting it.
-    processResolutionSearch();
-
-    // Immediately update the UI stream with the BotMessage component.
-    uiStream.update(
-      <Section title="response">
-        <BotMessage content={summaryStream.value} />
-      </Section>
-    );
+    })();
 
     return {
       id: nanoid(),

app/globals.css

@@ -189,7 +189,7 @@
 
   .mobile-chat-input-area {
     height: auto;
-    padding: 10px;
+    padding: 4px 10px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
     border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
@@ -198,62 +198,6 @@
     display: flex;
     align-items: center;
   }
-
-  .mobile-chat-input {
-    /* position: relative; */ /* No longer fixed to bottom */
-    /* bottom: 0; */
-    /* left: 0; */ /* Handled by parent flex */
-    /* right: 0; */ /* Handled by parent flex */
-    width: 100%; /* Ensure it takes full width of its container */
-    padding: 10px;
-    background-color: hsl(var(--background));
-    /* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
-    /* z-index: 30; */ /* No longer needed */
-  }
-
-  .mobile-chat-input input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius);
-    background-color: hsl(var(--input));
-    color: hsl(var(--foreground));
-    box-sizing: border-box;
-  }
-
-  .mobile-icons-bar-content .icon-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    cursor: pointer;
-  }
-
-  .mobile-icons-bar-content .icon-button:hover {
-    background-color: hsl(var(--secondary-foreground));
-    color: hsl(var(--secondary));
-  }
-
-  .mobile-chat-input .icon-button {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  .mobile-chat-input .icon-button.paperclip {
-    right: 40px;
-  }
-
-  .mobile-chat-input .icon-button.arrow-right {
-    right: 10px;
-  }
 }
 
 /* Added for MapboxDraw controls */

app/layout.tsx

@@ -12,7 +12,10 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
+import { UsageToggleProvider } from '@/components/usage-toggle-context'
 import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
+import { HistoryToggleProvider } from '@/components/history-toggle-context'
+import { HistorySidebar } from '@/components/history-sidebar'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
@@ -70,28 +73,33 @@ export default function RootLayout({
         )}
       >
         <CalendarToggleProvider>
-          <MapToggleProvider>
-            <ProfileToggleProvider>
-              <ThemeProvider
-                attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapContextProvider>
-                <MapLoadingProvider>
-                  <Header />
-                  <ConditionalLottie />
-                  {children}
-                  <Sidebar />
-                  <Footer />
-                  <Toaster />
-                </MapLoadingProvider>
-              </MapContextProvider>
-            </ThemeProvider>
-          </ProfileToggleProvider>
-        </MapToggleProvider>
+          <HistoryToggleProvider>
+            <MapToggleProvider>
+              <ProfileToggleProvider>
+                <UsageToggleProvider>
+                  <ThemeProvider
+                    attribute="class"
+                    defaultTheme="earth"
+                    enableSystem
+                    disableTransitionOnChange
+                    themes={['light', 'dark', 'earth']}
+                  >
+                    <MapContextProvider>
+                      <MapLoadingProvider>
+                        <Header />
+                        <ConditionalLottie />
+                        {children}
+                        <Sidebar />
+                        <HistorySidebar />
+                        <Footer />
+                        <Toaster />
+                      </MapLoadingProvider>
+                    </MapContextProvider>
+                  </ThemeProvider>
+                </UsageToggleProvider>
+              </ProfileToggleProvider>
+            </MapToggleProvider>
+          </HistoryToggleProvider>
         </CalendarToggleProvider>
         <Analytics />
         <SpeedInsights />

components/chat-panel.tsx

@@ -153,7 +153,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         }
       }, 500) // 500ms debounce delay
     },
-    [mapData]
+    [mapData, setSuggestions]
   )
 
   useEffect(() => {
@@ -199,13 +199,12 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         onSubmit={handleSubmit}
         className={cn(
           'max-w-full w-full',
-          isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : ''
+          isMobile ? 'px-2 pb-1 pt-0 h-full flex flex-col justify-center' : ''
         )}
       >
         <div
           className={cn(
-            'relative flex items-start w-full',
-            isMobile && 'mobile-chat-input' // Apply mobile chat input styling
+            'relative flex items-start w-full'
           )}
         >
           <input type="hidden" name="mapProvider" value={mapProvider} />
@@ -241,10 +240,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             value={input}
             data-testid="chat-input"
             className={cn(
-              'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'resize-none w-full rounded-fill border border-input pr-12 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               isMobile
-                ? 'mobile-chat-input input bg-background'
-                : 'bg-muted'
+                ? 'bg-background min-h-10 pl-4 pt-2 pb-1'
+                : 'bg-muted min-h-12 pl-14 pt-3 pb-1'
             )}
             onChange={e => {
               setInput(e.target.value)
@@ -293,11 +292,11 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       </form>
       {selectedFile && (
         <div className="w-full px-4 pb-2 mb-2">
-          <div className="flex items-center justify-between p-2 bg-muted rounded-lg">
-            <span className="text-sm text-muted-foreground truncate max-w-xs">
+          <div className="flex items-start justify-between p-2 bg-muted rounded-lg">
+            <span className="text-sm text-muted-foreground break-all mr-2">
               {selectedFile.name}
             </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
+            <Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
               <X size={16} />
             </Button>
           </div>

components/chat.tsx

@@ -14,7 +14,9 @@ import { MapProvider } from './map/map-provider'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
+import { useUsageToggle } from "@/components/usage-toggle-context";
 import SettingsView from "@/components/settings/settings-view";
+import { UsageView } from "@/components/usage-view";
 import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
 import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
 import dynamic from 'next/dynamic'
@@ -31,6 +33,7 @@ export function Chat({ id }: ChatProps) {
   const [aiState] = useAIState()
   const [isMobile, setIsMobile] = useState(false)
   const { activeView } = useProfileToggle();
+  const { isUsageOpen } = useUsageToggle();
   const { isCalendarOpen } = useCalendarToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
@@ -107,7 +110,7 @@ export function Chat({ id }: ChatProps) {
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {activeView ? <SettingsView /> : isUsageOpen ? <UsageView /> : <MapProvider />}
         </div>
         <div className="mobile-icons-bar">
           <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
@@ -218,7 +221,7 @@ export function Chat({ id }: ChatProps) {
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {activeView ? <SettingsView /> : isUsageOpen ? <UsageView /> : <MapProvider />}
         </div>
       </div>
     </MapDataProvider>

components/conditional-lottie.tsx

@@ -3,13 +3,15 @@
 import LottiePlayer from '@/components/ui/lottie-player';
 import { useMapLoading } from '@/components/map-loading-context';
 import { useProfileToggle } from '@/components/profile-toggle-context'; // Added import
+import { useUsageToggle } from '@/components/usage-toggle-context';
 
 const ConditionalLottie = () => {
   const { isMapLoaded } = useMapLoading();
   const { activeView } = useProfileToggle(); // Added this line
+  const { isUsageOpen } = useUsageToggle();
 
   // Updated isVisible logic
-  return <LottiePlayer isVisible={!isMapLoaded && activeView === null} />;
+  return <LottiePlayer isVisible={!isMapLoaded && activeView === null && !isUsageOpen} />;
 };
 
 export default ConditionalLottie;

components/empty-screen.tsx

@@ -41,14 +41,14 @@ export function EmptyScreen({
               <Button
                 key={item.message} // Use a unique property as the key.
                 variant="link"
-                className="h-auto p-0 text-base flex items-center"
+                className="h-auto p-0 text-base flex items-start whitespace-normal text-left"
                 name={item.message}
                 onClick={async () => {
                   submitMessage(item.message);
                 }}
               >
-                <Icon size={16} className="mr-2 text-muted-foreground" />
-                {item.heading}
+                <Icon size={16} className="mr-2 mt-1 text-muted-foreground shrink-0" />
+                <span className="flex-1">{item.heading}</span>
               </Button>
             );
           })}

components/header-search-button.tsx

@@ -9,7 +9,7 @@ import { useActions, useUIState } from 'ai/rsc'
 import { AI } from '@/app/actions'
 import { nanoid } from 'nanoid'
 import { UserMessage } from './user-message'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 import { useSettingsStore } from '@/lib/store/settings'
 import { useMapData } from './map/map-data-context'
 
@@ -37,7 +37,11 @@ export function HeaderSearchButton() {
 
   const handleResolutionSearch = async () => {
     if (mapProvider === 'mapbox' && !map) {
-      toast.error('Map is not available yet. Please wait for it to load.')
+      toast.error('Mapbox is not available yet. Please wait for it to load.')
+      return
+    }
+    if (mapProvider === 'google' && !mapData.cameraState) {
+      toast.error('Google Maps state is not available yet.')
       return
     }
     if (!actions) {
@@ -73,7 +77,7 @@ export function HeaderSearchButton() {
         const { center, range } = mapData.cameraState
         const zoom = Math.round(Math.log2(40000000 / (range || 1)));
 
-        let staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat},${center.lng}&zoom=${zoom}&size=640x480&maptype=satellite&key=${apiKey}`;
+        let staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat},${center.lng}&zoom=${zoom}&size=640x480&scale=2&maptype=satellite&key=${apiKey}`;
 
         const response = await fetch(staticMapUrl);
         if (!response.ok) {
@@ -107,7 +111,7 @@ export function HeaderSearchButton() {
       variant="ghost"
       size="icon"
       onClick={handleResolutionSearch}
-      disabled={isAnalyzing || !map || !actions}
+      disabled={isAnalyzing || !actions || (mapProvider === 'mapbox' && !map) || (mapProvider === 'google' && !mapData.cameraState)}
       title="Analyze current map view"
     >
       {isAnalyzing ? (
@@ -119,9 +123,8 @@ export function HeaderSearchButton() {
   )
 
   const mobileButton = (
-    <Button variant="ghost" size="sm" onClick={handleResolutionSearch} disabled={isAnalyzing || !map || !actions}>
-      <Search className="h-4 w-4 mr-2" />
-      Search
+    <Button variant="ghost" size="icon" onClick={handleResolutionSearch} disabled={isAnalyzing || !actions || (mapProvider === 'mapbox' && !map) || (mapProvider === 'google' && !mapData.cameraState)}>
+      <Search className="h-[1.2rem] w-[1.2rem]" />
     </Button>
   )