Fix/resolution and prompting

components/chat-panel.tsx

@@ -213,7 +213,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             ref={fileInputRef}
             onChange={handleFileChange}
             className="hidden"
-            accept="text/plain,image/png,image/jpeg,image/webp"
+            accept="text/plain,image/png,image/jpeg,image/webp,text/csv,application/json"
           />
           {!isMobile && (
             <Button

components/graph-section.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import React from 'react'
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  AreaChart,
+  Area,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell
+} from 'recharts'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Section } from './section'
+import { ToolBadge } from './tool-badge'
+import { DataAnalysisResult } from '@/lib/types'
+import { StreamableValue, useStreamableValue } from 'ai/rsc'
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d']
+
+interface GraphSectionProps {
+  result: DataAnalysisResult | string | StreamableValue<DataAnalysisResult>
+}
+
+export function GraphSection({ result }: GraphSectionProps) {
+  if (!result) return null;
+
+  // Check if result is a static DataAnalysisResult object
+  // A StreamableValue is an opaque object and shouldn't have these properties
+  const isStatic = typeof result === 'object' && result !== null &&
+    ('chartType' in (result as any) || 'title' in (result as any) || 'data' in (result as any));
+  const isString = typeof result === 'string';
+
+  if (isStatic || isString) {
+    return <GraphCard data={result as any} />;
+  }
+
+  // Handle case where it might be a streamable value or something else
+  // We use a safe wrapper to avoid crashing if useStreamableValue throws
+  return <StreamedGraphSection result={result as any} />;
+}
+
+function StreamedGraphSection({ result }: { result: StreamableValue<any> }) {
+  const [data, error, pending] = useStreamableValue(result);
+
+  if (pending && !data) {
+    return (
+      <Section className="py-2">
+        <div className="animate-pulse flex space-y-4 flex-col">
+          <div className="h-4 bg-muted rounded w-3/4"></div>
+          <div className="h-64 bg-muted rounded"></div>
+        </div>
+      </Section>
+    );
+  }
+
+  return <GraphCard data={data} />;
+}
+
+function GraphCard({ data, pending }: { data: any, pending?: boolean }) {
+  const chartData: DataAnalysisResult | undefined = React.useMemo(() => {
+    if (!data) return undefined;
+    if (typeof data === 'string') {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        console.error('Error parsing graph data:', e);
+        return undefined;
+      }
+    }
+    return data as DataAnalysisResult;
+  }, [data]);
+
+  if (!chartData) return null;
+
+  const { title, description, chartType, data: plotData, config } = chartData;
+
+  const renderChart = () => {
+    if (!plotData || !config) return <div className="flex items-center justify-center h-full text-muted-foreground italic">Missing chart data or configuration</div>;
+
+    switch (chartType) {
+      case 'bar':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={plotData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={config.xAxisKey} />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              {config.series?.map((s, i) => (
+                <Bar key={s.key} dataKey={s.key} name={s.name} fill={s.color || COLORS[i % COLORS.length]} />
+              ))}
+            </BarChart>
+          </ResponsiveContainer>
+        );
+      case 'line':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={plotData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={config.xAxisKey} />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              {config.series?.map((s, i) => (
+                <Line key={s.key} type="monotone" dataKey={s.key} name={s.name} stroke={s.color || COLORS[i % COLORS.length]} />
+              ))}
+            </LineChart>
+          </ResponsiveContainer>
+        );
+      case 'area':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={plotData}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={config.xAxisKey} />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              {config.series?.map((s, i) => (
+                <Area key={s.key} type="monotone" dataKey={s.key} name={s.name} stroke={s.color || COLORS[i % COLORS.length]} fill={s.color || COLORS[i % COLORS.length]} />
+              ))}
+            </AreaChart>
+          </ResponsiveContainer>
+        );
+      case 'pie':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={plotData}
+                dataKey={config.series?.[0]?.key}
+                nameKey={config.xAxisKey}
+                cx="50%"
+                cy="50%"
+                outerRadius={80}
+                label
+              >
+                {plotData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip />
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        );
+      case 'scatter':
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <ScatterChart>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis type="number" dataKey={config.xAxisKey} name={config.xAxisKey} />
+              <YAxis type="number" dataKey={config.yAxisKey} name={config.yAxisKey} />
+              <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+              <Legend />
+              {config.series?.map((s, i) => (
+                <Scatter key={s.key} name={s.name} data={plotData} fill={s.color || COLORS[i % COLORS.length]} />
+              ))}
+            </ScatterChart>
+          </ResponsiveContainer>
+        );
+      default:
+        return (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            Unsupported chart type: {chartType || 'None'}
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Section className="py-2">
+      <div className="mb-2">
+        <ToolBadge tool="dataAnalysis">Graph: {title || 'Untitled'}</ToolBadge>
+      </div>
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg font-medium">{title || 'Data Analysis'}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] w-full">
+            {renderChart()}
+          </div>
+        </CardContent>
+      </Card>
+    </Section>
+  );
+}

components/header-search-button.tsx

@@ -129,7 +129,6 @@ export function HeaderSearchButton() {
 
       formData.append('action', 'resolution_search')
       formData.append('timezone', mapData.currentTimezone || 'UTC')
-      formData.append('drawnFeatures', JSON.stringify(mapData.drawnFeatures || []))
 
       const center = mapProvider === 'mapbox' && map ? map.getCenter() : mapData.cameraState?.center;
       if (center) {

lib/agents/researcher.tsx

@@ -32,6 +32,7 @@ Use these user-drawn areas/lines as primary areas of interest for your analysis
 3. **Search Specificity:** When using the 'search' tool, formulate queries that are as specific as possible.
 4. **Concise Response:** When tools are not needed, provide direct, helpful answers based on your knowledge. Match the user's language.
 5. **Citations:** Always cite source URLs when using information from tools.
+6. **No Text-Based Charts:** NEVER create charts, graphs, or visual representations using text-based formatting, asterisks (*), or other hardcoded characters. ALWAYS use the \`dataAnalysis\` tool for any visual data representation.
 
 ### **Tool Usage Guidelines (Mandatory)**
 
@@ -47,7 +48,20 @@ Use these user-drawn areas/lines as primary areas of interest for your analysis
   ONLY when the user explicitly provides one or more URLs and asks you to read, summarize, or extract content from them.
 - **Never use** this tool proactively.
 
-#### **3. Location, Geography, Navigation, and Mapping Queries**
+#### **3. Data Analysis and Visualization**
+- **Tool**: \`dataAnalysis\`
+- **When to use**:
+  Any query asking for a chart, graph, or visual representation of data. Use it when you have structured data (e.g., from web search or uploaded CSV/JSON files) that would be clearer in a visual format.
+- **Mandatory**: You MUST use this tool for all charts and graphs. NEVER attempt to create a chart using text, asterisks, or any other manual formatting in your response.
+- **Capabilities**: Can generate bar, line, pie, area, and scatter charts. It can also include geospatial points if the data has location information.
+
+**Examples that trigger \`dataAnalysis\`:**
+- "Create a bar chart showing the population of the top 5 largest cities"
+- "Plot a line graph of NVIDIA's stock price over the last 6 months"
+- "Show me a pie chart of my expenses from this uploaded CSV"
+- "Visualize the relationship between height and weight from this data as a scatter plot"
+
+#### **4. Location, Geography, Navigation, and Mapping Queries**
 - **Tool**: \`geospatialQueryTool\` → **MUST be used (no exceptions)** for:
   • Finding places, businesses, "near me", distances, directions
   • Travel times, routes, traffic, map generation
@@ -68,9 +82,10 @@ Use these user-drawn areas/lines as primary areas of interest for your analysis
 
 #### **Summary of Decision Flow**
 1. User gave explicit URLs? → \`retrieve\`
-2. Location/distance/direction/maps? → \`geospatialQueryTool\` (mandatory)
-3. Everything else needing external data? → \`search\`
-4. Otherwise → answer from knowledge
+2. Visualization/Chart/Graph requested? → \`dataAnalysis\`
+3. Location/distance/direction/maps? → \`geospatialQueryTool\` (mandatory)
+4. Everything else needing external data? → \`search\`
+5. Otherwise → answer from knowledge
 
 These rules override all previous instructions.
 

lib/agents/resolution-search.tsx

@@ -76,12 +76,12 @@ Analyze the user's prompt and the image to provide a holistic understanding of t
   const filteredMessages = messages.filter(msg => msg.role !== 'system');
 
   // Check if any message contains an image (resolution search is specifically for image analysis)
-  const hasImage = messages.some((message: any) =>
+  const hasImage = messages.some((message: any) => 
     Array.isArray(message.content) && 
     message.content.some((part: any) => part.type === 'image')
   )
 
-  // Use streamObject to get partial results.
+  // Use streamObject to get the partial object stream.
   return streamObject({
     model: await getModel(hasImage),
     system: systemPrompt,

lib/agents/tools/data-analysis.tsx

@@ -0,0 +1,19 @@
+import { createStreamableValue } from 'ai/rsc'
+import { dataAnalysisSchema } from '@/lib/schema/data-analysis'
+import { ToolProps } from '.'
+import { DataAnalysisResult } from '@/lib/types'
+import { GraphSection } from '@/components/graph-section'
+
+export const dataAnalysisTool = ({ uiStream }: ToolProps) => ({
+  description: 'Analyze data and generate a structured representation for visualization in a graph or chart. Use this tool when the user asks for a chart, graph, or data visualization, or when you have structured data (like from a CSV or search results) that would be better understood visually.',
+  parameters: dataAnalysisSchema,
+  execute: async (result: DataAnalysisResult) => {
+    const streamResults = createStreamableValue<DataAnalysisResult>()
+
+    uiStream.append(<GraphSection result={streamResults.value} />)
+
+    streamResults.done(result)
+
+    return result
+  }
+})

lib/agents/tools/index.tsx

@@ -3,6 +3,7 @@ import { retrieveTool } from './retrieve'
 import { searchTool } from './search'
 import { videoSearchTool } from './video-search'
 import { geospatialTool } from './geospatial' // Removed useGeospatialToolMcp import
+import { dataAnalysisTool } from './data-analysis'
 
 import { MapProvider } from '@/lib/store/settings'
 
@@ -25,6 +26,10 @@ export const getTools = ({ uiStream, fullResponse, mapProvider }: ToolProps) =>
     geospatialQueryTool: geospatialTool({
       uiStream,
       mapProvider
+    }),
+    dataAnalysis: dataAnalysisTool({
+      uiStream,
+      fullResponse
     })
   }
 

lib/agents/writer.tsx

@@ -25,6 +25,8 @@ export async function writer(
     Link format: [link text](url)
     Image format: ![alt text](url)
 
+    **IMPORTANT**: NEVER create charts, graphs, or visual representations using text-based formatting, asterisks (*), or other hardcoded characters. If you need to present data visually, ensure the appropriate tool has been used. Do not attempt to simulate a chart in your text response.
+
     There are also some proconfigured example queires. 
     When asked about 'What is a planet computer?' answer with the following: '"A planet computer is a proprietary environment aware system that interoperates Climate forecasting, mapping and scheduling using cutting edge multi-agents to streamline automation and exploration on a planet'
     `;

lib/schema/data-analysis.tsx

@@ -0,0 +1,25 @@
+import { DeepPartial } from 'ai'
+import { z } from 'zod'
+
+export const dataAnalysisSchema = z.object({
+  title: z.string().describe('The title of the chart'),
+  description: z.string().optional().describe('A brief description of the chart'),
+  chartType: z.enum(['bar', 'line', 'pie', 'area', 'scatter']).describe('The type of chart to render'),
+  data: z.array(z.record(z.any())).describe('The data points for the chart'),
+  config: z.object({
+    xAxisKey: z.string().describe('The key in the data object to use for the X axis'),
+    yAxisKey: z.string().optional().describe('The key in the data object to use for the Y axis (for scatter charts)'),
+    series: z.array(z.object({
+      key: z.string().describe('The key in the data object for this series'),
+      name: z.string().describe('The display name for this series'),
+      color: z.string().optional().describe('Optional hex color for this series')
+    })).describe('The series to be plotted')
+  }).describe('Configuration for the chart layout'),
+  geospatial: z.array(z.object({
+    latitude: z.number(),
+    longitude: z.number(),
+    label: z.string().optional()
+  })).optional().describe('Optional geospatial data points to be displayed on a map')
+})
+
+export type PartialDataAnalysis = DeepPartial<typeof dataAnalysisSchema>

lib/types/index.ts

@@ -25,6 +25,27 @@ export type SearchResultItem = {
   content: string
 }
 
+export type DataAnalysisResult = {
+  title: string;
+  description?: string;
+  chartType: 'bar' | 'line' | 'pie' | 'area' | 'scatter';
+  data: any[];
+  config: {
+    xAxisKey: string;
+    yAxisKey?: string;
+    series: {
+      key: string;
+      name: string;
+      color?: string;
+    }[];
+  };
+  geospatial?: {
+    latitude: number;
+    longitude: number;
+    label?: string;
+  }[];
+};
+
 export type ExaSearchResultItem = {
   score: number
   title: string

package.json

@@ -86,6 +86,7 @@
     "react-markdown": "^9.1.0",
     "react-textarea-autosize": "^8.5.9",
     "react-toastify": "^10.0.6",
+    "recharts": "^3.7.0",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",