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>
  )