Upgraded UI

app.py

@@ -25,6 +25,24 @@ openai_client = AsyncOpenAI(api_key=OPENAI_API_KEY) if OPENAI_API_KEY else None
 # Local tools definition - empty since we handle UI display in Python code directly
 local_tools = []
 
+# Regular tools that the AI can choose to call - REMOVED show_car_search_results
+# The AI only needs to know about search-cars, Python will handle the UI display
+regular_tools = []
+
+# Convert regular tools to OpenAI function format
+local_tools = []
+for tool in regular_tools:
+    local_tools.append(
+        {
+            "type": "function",
+            "function": {
+                "name": tool["name"],
+                "description": tool["description"],
+                "parameters": tool["input_schema"],
+            },
+        }
+    )
+
 
 @cl.oauth_callback
 def oauth_callback(
@@ -79,12 +97,15 @@ async def on_mcp_connect(connection, session: ClientSession):
                     log.info("Auto-executing 'run-me-first' tool...")
                     result = await session.call_tool("run-me-first", {})
 
-                    # Extract the result text
-                    if hasattr(result, "content") and result.content:
-                        result_text = (
-                            result.content[0].text
-                            if hasattr(result.content[0], "text")
-                            else str(result)
+                    # Extract the result text using improved chunk collection
+                    if isinstance(result, dict):
+                        result_text = json.dumps(result)
+                    elif hasattr(result, "content") and result.content:
+                        log.info(
+                            f"Received {len(result.content)} content blocks from run-me-first"
+                        )
+                        result_text = "".join(
+                            getattr(block, "text", "") for block in result.content
                         )
                     else:
                         result_text = str(result)
@@ -129,7 +150,7 @@ async def start():
         [
             {
                 "role": "system",
-                "content": """You are a helpful AI assistant for car searches. When a user asks for cars, use the 'search-cars' tool. After the tool runs and the results are displayed, simply confirm this to the user with a brief message like 'I've found [X] cars for you, take a look at the results below.' Do NOT list the car details in your own response.""",
+                "content": """You are a helpful AI assistant for car searches. When a user asks for cars, use the 'search-cars' tool to find vehicles. The system will automatically display the results in a beautiful UI format, so you don't need to worry about formatting - just focus on understanding what the user wants and calling the search tool with appropriate parameters.""",
             }
         ],
     )
@@ -147,14 +168,40 @@ async def show_car_search_results(
         "hits": hits or [],
     }
 
+    # Console log the props for debugging
+    log.info("=== CarSearchResults Component Props ===")
+    log.info(f"total_documents: {props['total_documents']}")
+    log.info(f"search_time_ms: {props['search_time_ms']}")
+    log.info(f"facet_counts length: {len(props['facet_counts'])}")
+    log.info(f"hits length: {len(props['hits'])}")
+
+    # Log first hit structure for debugging data shape
+    if props["hits"]:
+        log.info("=== First Hit Structure ===")
+        first_hit = props["hits"][0]
+        log.info(
+            f"First hit keys: {list(first_hit.keys()) if isinstance(first_hit, dict) else 'Not a dict'}"
+        )
+        if isinstance(first_hit, dict) and "document" in first_hit:
+            log.info(f"Document keys: {list(first_hit['document'].keys())}")
+            if "vehicle_make_brand" in first_hit["document"]:
+                log.info(
+                    f"vehicle_make_brand: {first_hit['document']['vehicle_make_brand']}"
+                )
+        log.info(f"Full first hit: {json.dumps(first_hit, indent=2)}")
+
+    log.info("=== End Props Debug ===")
+
     car_results_element = cl.CustomElement(name="CarSearchResults", props=props)
     await cl.Message(
-        content="", elements=[car_results_element], author="CarSearchResults"
+        content=f"🔎 Found {total_documents:,} vehicles in {search_time_ms} ms:",
+        elements=[car_results_element],
+        author="CarSearchResults",
     ).send()
     return f"Car search results displayed: {total_documents:,} vehicles found across {len(facet_counts or [])} categories with {len(hits or [])} detailed listings"
 
 
-# --- THIS IS THE FINAL REFACTORED on_message FUNCTION ---
+# --- THIS IS THE FINAL, DEFINITIVE on_message FUNCTION ---
 @cl.on_message
 async def main(message: cl.Message):
     history = cl.user_session.get("message_history")
@@ -165,28 +212,47 @@ async def main(message: cl.Message):
         async with cl.Step(name="Thinking", type="llm") as thinking_step:
             thinking_step.input = message.content
 
-            # Get the AI's plan: does it want to use a tool?
             all_mcp_tools = cl.user_session.get("mcp_tools", {})
             aggregated_tools = [
                 tool for conn_tools in all_mcp_tools.values() for tool in conn_tools
             ]
+            # Add local tools to the aggregated tools
+            aggregated_tools.extend(local_tools)
 
             response = await openai_client.chat.completions.create(
                 model="gpt-4o",
                 messages=history,
                 tools=aggregated_tools if aggregated_tools else None,
-                tool_choice="auto",
+                tool_choice="auto" if aggregated_tools else None,
             )
             response_message = response.choices[0].message
             thinking_step.output = response_message
 
-        # If the AI wants to use tools, handle them within their own steps.
+        # If the AI wants to use tools, handle them.
         if response_message.tool_calls:
-            history.append(response_message)
+            # Add the assistant's message with tool calls to history
+            history.append(
+                {
+                    "role": "assistant",
+                    "content": response_message.content,
+                    "tool_calls": [
+                        {
+                            "id": tool_call.id,
+                            "type": "function",
+                            "function": {
+                                "name": tool_call.function.name,
+                                "arguments": tool_call.function.arguments,
+                            },
+                        }
+                        for tool_call in response_message.tool_calls
+                    ],
+                }
+            )
 
             for tool_call in response_message.tool_calls:
                 tool_name = tool_call.function.name
                 tool_args = json.loads(tool_call.function.arguments)
+                tool_result = "No result"  # Default fallback
 
                 # Create a specific step for the tool call for UI feedback.
                 async with cl.Step(
@@ -194,57 +260,211 @@ async def main(message: cl.Message):
                 ) as tool_step:
                     tool_step.input = tool_args
 
-                    # We only need special handling for our primary tool.
-                    if tool_name == "search-cars":
-                        mcp_connection_name = next(
-                            (
-                                conn_name
-                                for conn_name, tools in all_mcp_tools.items()
-                                if any(
-                                    t["function"]["name"] == tool_name for t in tools
+                    try:
+                        if tool_name == "search-cars":
+                            log.info("Executing 'search-cars' tool.")
+                            mcp_connection_name = next(
+                                (
+                                    conn_name
+                                    for conn_name, tools in all_mcp_tools.items()
+                                    if any(
+                                        t["function"]["name"] == tool_name
+                                        for t in tools
+                                    )
+                                ),
+                                None,
+                            )
+
+                            if not mcp_connection_name:
+                                raise Exception(
+                                    f"Tool '{tool_name}' not found in any MCP connection"
                                 )
-                            ),
-                            None,
-                        )
 
-                        if mcp_connection_name:
                             mcp_session, _ = cl.context.session.mcp_sessions.get(
                                 mcp_connection_name
                             )
-                            tool_task = mcp_session.call_tool(tool_name, tool_args)
-                            result = await asyncio.wait_for(tool_task, timeout=30.0)
-                            raw_json_output = (
-                                str(result.content[0].text)
-                                if hasattr(result, "content") and result.content
-                                else str(result)
+                            if not mcp_session:
+                                raise Exception(
+                                    f"MCP session for '{mcp_connection_name}' not found"
+                                )
+
+                            log.info(f"Calling search-cars with args: {tool_args}")
+
+                            try:
+                                tool_task = mcp_session.call_tool(tool_name, tool_args)
+                                result = await asyncio.wait_for(
+                                    tool_task, timeout=45.0
+                                )  # Increased timeout
+
+                                # 1) Collect all chunks (if any) into one string
+                                if isinstance(result, dict):
+                                    search_data = result
+                                    full_text = json.dumps(result)
+                                elif hasattr(result, "content") and result.content:
+                                    log.info(
+                                        f"Received {len(result.content)} content blocks from search-cars"
+                                    )
+                                    full_text = "".join(
+                                        getattr(block, "text", "")
+                                        for block in result.content
+                                    )
+                                else:
+                                    full_text = str(result)
+
+                                # 2) Parse the complete JSON (if not already parsed)
+                                if not isinstance(result, dict):
+                                    try:
+                                        search_data = json.loads(full_text)
+                                    except json.JSONDecodeError as e:
+                                        log.error(
+                                            f"Failed to parse JSON from search-cars: {e}"
+                                        )
+                                        # fallback: show raw response so you can debug
+                                        await cl.Message(
+                                            content=f"⚠️ Invalid JSON from search-cars:\n```json\n{full_text}\n```"
+                                        ).send()
+                                        tool_step.output = f"JSON Parse Error: {str(e)}"
+                                        tool_result = f"JSON Parse Error: {str(e)}"
+                                        continue
+
+                                log.info(
+                                    f"Raw search result length: {len(full_text)} characters"
+                                )
+                                log.info(f"Raw search response: {full_text}")
+                                tool_step.output = search_data
+                                tool_result = full_text
+
+                                # 3) Extract data with proper fallbacks
+                                found = search_data.get("found", 0)
+                                hits = search_data.get("hits", [])
+                                facets = search_data.get("facet_counts", [])
+                                time_ms = search_data.get("search_time_ms", 0)
+
+                                log.info(
+                                    f"Extracted data - found: {found}, hits: {len(hits)}, facets: {len(facets)}, time_ms: {time_ms}"
+                                )
+
+                                # PYTHON ORCHESTRATION: Automatically display results after search
+                                log.info(
+                                    "Search completed, automatically displaying results..."
+                                )
+                                try:
+                                    ui_result = await show_car_search_results(
+                                        total_documents=found,
+                                        search_time_ms=time_ms,
+                                        hits=hits,
+                                        facet_counts=facets,
+                                    )
+                                    log.info(f"UI display result: {ui_result}")
+                                except Exception as ui_error:
+                                    log.error(
+                                        f"Error displaying search results: {ui_error}"
+                                    )
+                                    # Show raw response as fallback
+                                    await cl.Message(
+                                        content=f"Search completed but UI display failed. Raw response:\n```json\n{full_text}\n```"
+                                    ).send()
+
+                            except asyncio.TimeoutError:
+                                error_msg = f"Search operation timed out after 45 seconds. The search server may be overloaded."
+                                log.error(error_msg)
+                                tool_step.output = error_msg
+                                tool_result = error_msg
+
+                        else:
+                            # Handle other MCP tools
+                            mcp_connection_name = next(
+                                (
+                                    conn_name
+                                    for conn_name, tools in all_mcp_tools.items()
+                                    if any(
+                                        t["function"]["name"] == tool_name
+                                        for t in tools
+                                    )
+                                ),
+                                None,
                             )
 
-                            # On success, parse data and display the UI component.
-                            search_data = json.loads(raw_json_output)
-                            PAGINATION_LIMIT = 12
-                            paginated_hits = search_data.get("hits", [])[
-                                :PAGINATION_LIMIT
-                            ]
-
-                            await show_car_search_results(
-                                total_documents=search_data.get("found", 0),
-                                search_time_ms=search_data.get("search_time_ms", 0),
-                                facet_counts=search_data.get("facet_counts", []),
-                                hits=paginated_hits,
+                            if not mcp_connection_name:
+                                raise Exception(
+                                    f"Tool '{tool_name}' not found in any MCP connection"
+                                )
+
+                            mcp_session, _ = cl.context.session.mcp_sessions.get(
+                                mcp_connection_name
                             )
+                            if not mcp_session:
+                                raise Exception(
+                                    f"MCP session for '{mcp_connection_name}' not found"
+                                )
 
-                            # The turn is now complete. The UI is the response.
-                            tool_step.output = search_data
-                        else:
-                            tool_step.error = f"Error: Tool '{tool_name}' not found."
+                            log.info(f"Calling {tool_name} with args: {tool_args}")
+                            tool_task = mcp_session.call_tool(tool_name, tool_args)
+                            result = await asyncio.wait_for(
+                                tool_task, timeout=45.0
+                            )  # Increased timeout
+
+                            # Collect all chunks (if any) into one string
+                            if isinstance(result, dict):
+                                raw_output = json.dumps(result)
+                            elif hasattr(result, "content") and result.content:
+                                log.info(
+                                    f"Received {len(result.content)} content blocks from {tool_name}"
+                                )
+                                raw_output = "".join(
+                                    getattr(block, "text", "")
+                                    for block in result.content
+                                )
+                            else:
+                                raw_output = str(result)
+
+                            log.info(f"Tool {tool_name} completed successfully")
+                            tool_step.output = raw_output
+                            tool_result = raw_output
+
+                    except Exception as e:
+                        error_msg = f"Error executing tool '{tool_name}': {str(e) or 'Unknown error'}"
+                        log.error(error_msg)
+                        log.error(f"Exception type: {type(e).__name__}")
+                        tool_step.error = error_msg
+                        tool_result = error_msg
+
+                # ALWAYS add the tool result to history - this is critical for OpenAI API
+                history.append(
+                    {
+                        "role": "tool",
+                        "tool_call_id": tool_call.id,
+                        "content": str(tool_result),
+                    }
+                )
+                log.info(
+                    f"Added tool result to history for {tool_name}: {str(tool_result)[:100]}..."
+                )
+
+            # Now let the AI provide a final response with the tool results
+            async with cl.Step(name="Responding", type="llm") as response_step:
+                response_step.input = "Generating response based on tool results"
+
+                final_response = await openai_client.chat.completions.create(
+                    model="gpt-4o",
+                    messages=history,
+                    tools=aggregated_tools if aggregated_tools else None,
+                    tool_choice="none",  # No more tool calls - just respond
+                )
+
+                final_message = final_response.choices[0].message
+                response_step.output = final_message
 
-                    # NOTE: No final summary message is generated.
+                if final_message.content:
+                    await cl.Message(content=final_message.content).send()
+                    history.append(
+                        {"role": "assistant", "content": final_message.content}
+                    )
         else:
             # If no tool was called, the AI's first response is the final answer.
             final_answer = response_message.content
             if final_answer:
                 await cl.Message(content=final_answer).send()
-                history.append({"role": "assistant", "content": final_answer})
 
     except Exception as e:
         log.error(f"Error in main message loop: {e}")

public/elements/CarSearchResults.jsx

@@ -1,252 +1,155 @@
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { MapPin, Gauge, Heart } from "lucide-react"
-import { useState, useMemo } from 'react'
+import { MapPin, Calendar, Gauge, Heart, MoreHorizontal } from "lucide-react"
 
-export default function CarSearchResults(props) {
-  // State for sorting and filtering
-  const [sortBy, setSortBy] = useState('default')
-  const [activeFilters, setActiveFilters] = useState({})
-
-  // --- Helper Functions ---
+export default function CarSearchResults() {
+  console.log("CarSearchResults props:", props)
   const formatPrice = (priceInCents) => {
-    return `R ${new Intl.NumberFormat('en-ZA').format(priceInCents / 100)}`
+    return `R ${new Intl.NumberFormat().format(priceInCents / 100)}`
   }
 
   const formatMileage = (mileageInKm) => {
-    return `${new Intl.NumberFormat('en-ZA').format(mileageInKm)} km`
+    return `${new Intl.NumberFormat().format(mileageInKm)} km`
   }
 
   const getConditionColor = (condition) => {
     const colors = {
-      'excellent': 'bg-green-100 text-green-800 border-green-200',
-      'good': 'bg-blue-100 text-blue-800 border-blue-200',
-      'fair': 'bg-yellow-100 text-yellow-800 border-yellow-200',
-      'used': 'bg-gray-100 text-gray-800 border-gray-200'
+      'excellent': 'bg-green-100 text-green-800',
+      'good': 'bg-blue-100 text-blue-800',
+      'fair': 'bg-yellow-100 text-yellow-800',
+      'used': 'bg-gray-100 text-gray-800'
     }
-    return colors[condition?.toLowerCase()] || 'bg-gray-100 text-gray-800 border-gray-200'
+    return colors[condition?.toLowerCase()]?.toUpperCase() || 'bg-gray-100 text-gray-800'
   }
 
-  // --- Event Handlers ---
-  const handleToggleFilter = (filterType, value) => {
-    setActiveFilters(prev => ({
-      ...prev,
-      // If the current filter is already set to this value, clear it. Otherwise, set it.
-      [filterType]: prev[filterType] === value ? null : value
-    }))
+  const calculateInsuranceQuote = (priceInCents, year, condition) => {
+    const vehicleValue = priceInCents / 100
+    const currentYear = new Date().getFullYear()
+    const age = currentYear - parseInt(year)
+    
+    let baseRate = 0.08
+    
+    if (age <= 3) baseRate = 0.06
+    else if (age <= 7) baseRate = 0.07
+    else if (age <= 12) baseRate = 0.08
+    else baseRate = 0.10
+    
+    if (condition?.toLowerCase() === 'excellent') baseRate *= 0.9
+    else if (condition?.toLowerCase() === 'fair') baseRate *= 1.1
+    
+    const monthlyQuote = (vehicleValue * baseRate) / 12
+    return Math.round(monthlyQuote)
   }
 
-  const handleClearFilters = () => {
-    setActiveFilters({});
-  };
-
-  // --- Memoized Data Processing ---
-  // useMemo ensures this complex filtering/sorting only re-runs when necessary
-  const processedCars = useMemo(() => {
-    const cars = props.hits || []
-    
-    return [...cars]
-      .filter((car) => {
-        if (activeFilters.brand && car.document.vehicle_make_brand !== activeFilters.brand) return false
-        if (activeFilters.condition && car.document.vehicle_condition_status !== activeFilters.condition) return false
-        return true
-      })
-      .sort((a, b) => {
-        switch (sortBy) {
-          case 'price_asc':
-            return a.document.vehicle_price_in_cents - b.document.vehicle_price_in_cents
-          case 'price_desc':
-            return b.document.vehicle_price_in_cents - a.document.vehicle_price_in_cents
-          case 'mileage_asc':
-            return a.document.vehicle_mileage_in_km - b.document.vehicle_mileage_in_km
-          case 'year_desc':
-            return b.document.vehicle_manufacturing_year - a.document.vehicle_manufacturing_year
-          default:
-            return 0
-        }
-      })
-  }, [props.hits, activeFilters, sortBy])
+  const cars = props.hits || []
 
-  // --- Render Logic ---
-  const hasActiveFilters = Object.values(activeFilters).some(val => val !== null);
-  const brandFacet = props.facet_counts?.find(f => f.field_name === 'vehicle_make_brand');
-  const conditionFacet = props.facet_counts?.find(f => f.field_name === 'vehicle_condition_status');
+console.log(props);
 
   return (
-    <div className="w-full max-w-7xl mx-auto space-y-6 font-sans p-4">
+    <div className="w-full max-w-4xl mx-auto space-y-4">
       {/* Header */}
-      <div className="mb-4">
-        <h2 className="text-3xl font-bold text-gray-800 dark:text-white">
-          {new Intl.NumberFormat('en-ZA').format(props.total_documents || 0)} vehicles found
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900">
+          {new Intl.NumberFormat().format(props.total_documents || 0)} vehicles found
         </h2>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
+        <p className="text-gray-600">
           Search completed in {props.search_time_ms || 0}ms
         </p>
       </div>
 
-      {/* Filter and Sort Controls */}
-      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex flex-wrap gap-x-6 gap-y-4">
-          {/* Brand Filter */}
-          {brandFacet?.counts && (
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="font-medium text-gray-700 dark:text-gray-300">Brand:</span>
-              {brandFacet.counts.slice(0, 5).map(brand => (
-                <button 
-                  key={brand.value} 
-                  onClick={() => handleToggleFilter('brand', brand.value)}
-                  className={`px-3 py-1 border rounded-full text-sm transition-all duration-200 ${
-                    activeFilters.brand === brand.value 
-                      ? 'bg-blue-600 text-white border-blue-600 shadow-md' 
-                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
-                  }`}
-                >
-                  {brand.value}
-                </button>
-              ))}
-            </div>
-          )}
-          {/* Condition Filter */}
-          {conditionFacet?.counts && (
-             <div className="flex flex-wrap items-center gap-2">
-              <span className="font-medium text-gray-700 dark:text-gray-300">Condition:</span>
-              {conditionFacet.counts.map(condition => (
-                <button 
-                  key={condition.value} 
-                  onClick={() => handleToggleFilter('condition', condition.value)}
-                  className={`px-3 py-1 border rounded-full text-sm transition-all duration-200 ${
-                    activeFilters.condition === condition.value 
-                      ? 'bg-blue-600 text-white border-blue-600 shadow-md' 
-                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
-                  }`}
-                >
-                  {condition.value}
+      {/* Car Listings */}
+      <div className="space-y-4">
+        {cars.map((car) => (
+          <Card key={car.document?.vehicle_listing_id} className="overflow-hidden hover:shadow-lg transition-shadow">
+            <div className="flex">
+              {/* Car Image */}
+              <div className="w-64 h-48 bg-gray-200 flex-shrink-0 relative">
+                {car.document.vehicle_listing_image_urls?.[0] ? (
+                  <img 
+                    src={car.document.vehicle_listing_image_urls[0]} 
+                    alt={`${car.document.vehicle_make_brand} ${car.document.vehicle_model_name}`}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-gray-400">
+                    No Image
+                  </div>
+                )}
+                <button className="absolute top-3 right-3 p-2 bg-white/80 rounded-full hover:bg-white transition-colors">
+                  <Heart className="h-4 w-4 text-gray-600" />
                 </button>
-              ))}
-            </div>
-          )}
-        </div>
+              </div>
 
-        {/* Sort Dropdown */}
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <label htmlFor="sort-by" className="font-medium text-gray-700 dark:text-gray-300">Sort by:</label>
-          <select
-            id="sort-by"
-            value={sortBy}
-            onChange={(e) => setSortBy(e.target.value)}
-            className="border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            <option value="default">Relevance</option>
-            <option value="price_asc">Price: Low to High</option>
-            <option value="price_desc">Price: High to Low</option>
-            <option value="mileage_asc">Mileage: Low to High</option>
-            <option value="year_desc">Year: Newest First</option>
-          </select>
-        </div>
-      </div>
+              {/* Car Details */}
+              <div className="flex-1 p-6">
+                <div className="flex justify-between items-start mb-4">
+                  <div>
+                    <h3 className="text-xl font-bold text-gray-900 mb-1 dark:text-gray-400">
+                      {car.document.vehicle_manufacturing_year} {car.document.vehicle_make_brand} {car.document.vehicle_model_name}
+                    </h3>
+                    {car.document.vehicle_variant_full_name && (
+                      <p className="text-gray-600 mb-2 dark:text-gray-400 text-sm">
+                        {car.document.vehicle_variant_full_name}
+                      </p>
+                    )}
+                  </div>
+                </div>
 
-      {/* Active Filters Display */}
-      {hasActiveFilters && (
-        <div className="flex flex-wrap items-center gap-2 mb-4">
-          {Object.entries(activeFilters).map(([key, value]) => value && (
-            <span key={key} className="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-              {key}: {value}
-              <button 
-                onClick={() => handleToggleFilter(key, value)}
-                className="ml-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100"
-                aria-label={`Remove ${value} filter`}
-              >
-                &times;
-              </button>
-            </span>
-          ))}
-          <button 
-            onClick={handleClearFilters}
-            className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white underline"
-          >
-            Clear all
-          </button>
-        </div>
-      )}
+                {/* Car Stats */}
+                <div className="flex items-center gap-6 mb-4 text-sm text-gray-600 dark:text-gray-400">
+                  <div className="flex items-center gap-1">
+                    <Gauge className="h-4 w-4" />
+                    <span>{formatMileage(car.document.vehicle_mileage_in_km)}</span>
+                  </div>
+                  
+                  {car.document.vehicle_condition_status && (
+                    <Badge className={getConditionColor(car.document.vehicle_condition_status)}>
+                      {car.document.vehicle_condition_status}
+                    </Badge>
+                  )}
 
-      {/* Car Listings - Responsive Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        {processedCars.map((car) => (
-          <Card key={car.document?.id || car.document?.vehicle_listing_id} className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col rounded-lg">
-            <div className="w-full h-48 bg-gray-200 dark:bg-gray-700 relative">
-              <img 
-                src={car.document.vehicle_listing_image_urls?.[0]} 
-                alt={`${car.document.vehicle_make_brand} ${car.document.vehicle_model_name}`}
-                className="w-full h-full object-cover"
-                onError={(e) => { e.target.onerror = null; e.target.src='https://placehold.co/600x400/cccccc/ffffff?text=No+Image'; }}
-              />
-              <button className="absolute top-3 right-3 p-2 bg-white/80 rounded-full hover:bg-white transition-colors shadow-md">
-                <Heart className="h-4 w-4 text-red-500" />
-              </button>
-            </div>
-            <div className="p-4 flex-1 flex flex-col">
-              <div className="mb-3">
-                <h3 className="text-md font-bold text-gray-900 dark:text-white mb-1 line-clamp-1">
-                  {car.document.vehicle_manufacturing_year} {car.document.vehicle_make_brand}
-                </h3>
-                <p className="text-gray-700 dark:text-gray-300 text-sm line-clamp-1">
-                  {car.document.vehicle_model_name} {car.document.vehicle_variant_full_name}
-                </p>
-              </div>
-              <div className="flex flex-wrap items-center gap-x-3 gap-y-2 mb-4 text-xs">
-                <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400" title="Mileage">
-                  <Gauge className="h-4 w-4" />
-                  <span>{formatMileage(car.document.vehicle_mileage_in_km)}</span>
-                </div>
-                <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400" title="Location">
-                  <MapPin className="h-4 w-4" />
-                  <span className="truncate">{car.document.vehicle_location_city}</span>
+                  <div className="flex items-center gap-1">
+                    <MapPin className="h-4 w-4" />
+                    <span>{car.document.vehicle_location_suburb || car.document.vehicle_location_city}</span>
+                  </div>
                 </div>
-              </div>
-              {car.document.vehicle_condition_status && (
-                  <Badge className={`mb-4 w-min ${getConditionColor(car.document.vehicle_condition_status)}`}>
-                    {car.document.vehicle_condition_status}
-                  </Badge>
-              )}
-              <div className="mt-auto border-t border-gray-200 dark:border-gray-700 pt-3">
-                <div className="text-xl font-extrabold text-gray-800 dark:text-white mb-2">
-                  {formatPrice(car.document.vehicle_price_in_cents)}
+
+                {/* Price and Insurance Quote */}
+                <div className="flex justify-between items-end">
+                  <div>
+                    <div className="text-2xl font-bold text-green-600 mb-2">
+                      {formatPrice(car.document.vehicle_price_in_cents)}
+                    </div>
+                    <div className="flex flex-col gap-1">
+                      <div className="text-sm text-blue-600 font-medium">
+                        Insurance from R{new Intl.NumberFormat().format(
+                          car.document.vehicle_indicative_quote/100
+                        )}/month
+                      </div>
+                      <div className="flex items-center gap-1 text-xs text-gray-500">
+                        <img 
+                          src="https://www.naked.insure/favicons/apple-icon-180x180.png" 
+                          alt="Naked Insurance" 
+                          className="h-4 w-auto"
+                        />
+                        <span className="font-medium">Naked Insurance</span>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <a 
-                  href="https://www.naked.insure/platform/quote/car"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-blue-600 dark:text-blue-400 font-medium hover:text-blue-800 dark:hover:text-blue-300 hover:underline transition-colors"
-                >
-                  Est. Insurance from R{new Intl.NumberFormat('en-ZA').format(
-                    Math.round(car.document.vehicle_indicative_quote / 100)
-                  )}/month from naked insurance
-                </a>
               </div>
             </div>
           </Card>
         ))}
       </div>
 
-      {/* No Results States */}
-      {processedCars.length === 0 && hasActiveFilters && (
-        <div className="text-center py-16">
-          <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">No vehicles match your filters</h3>
-          <p className="text-gray-500 dark:text-gray-400 mb-4">Try adjusting or clearing your filters to see more results.</p>
-          <button 
-            onClick={handleClearFilters}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-          >
-            Clear all filters
-          </button>
-        </div>
-      )}
-      {processedCars.length === 0 && !hasActiveFilters && props.hits?.length === 0 && (
-         <div className="text-center py-16">
-          <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">No vehicles found</h3>
-          <p className="text-gray-500 dark:text-gray-400">Try adjusting your search criteria in the chat.</p>
+      {/* No Results */}
+      {cars.length === 0 && (
+        <div className="text-center py-12">
+          <div className="text-gray-400 text-lg mb-2">No vehicles found</div>
+          <div className="text-gray-500">Try adjusting your search criteria</div>
         </div>
       )}
     </div>
   )
-}
+}