Checkpoint 1 - Working UI

.chainlit/config.toml

@@ -66,7 +66,7 @@ edit_message = true
 
 [UI]
 # Name of the assistant.
-name = "Assistant"
+name = "Cars.AI.za"
 
 # default_theme = "dark"
 

.gitignore

@@ -72,4 +72,6 @@ venv.bak/
 Thumbs.db
 
 # uv
-.uv/ 
+.uv/ 
+
+.files/

app.py

@@ -3,32 +3,63 @@ import logging
 import sys
 import traceback
 from typing import Optional, Dict, List, Any
-import asyncio
 import json
 import chainlit as cl
-import google.generativeai as genai
 from openai import AsyncOpenAI
 from mcp import ClientSession
 
-# Configure the logger
 logging.basicConfig(
-    level=os.environ.get(
-        "LOGLEVEL", "DEBUG"
-    ),  # Default to DEBUG, configurable via environment
+    level=logging.INFO,
     stream=sys.stdout,
     format="%(asctime)s - %(levelname)s - %(message)s",
 )
 
-# Create logger instance
 log = logging.getLogger(__name__)
 
-log.info("Application script starting...")
-
 DEFAULT_MODEL = os.getenv("DEFAULT_MODEL", "gpt-4o")
 OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 
 openai_client = AsyncOpenAI(api_key=OPENAI_API_KEY) if OPENAI_API_KEY else None
 
+# Local tools definition - defines the custom component as a tool the AI can use
+local_tools = [
+    {
+        "type": "function",
+        "function": {
+            "name": "show_car_search_results",
+            "description": "IMPORTANT: Use this tool to display car search results in a visual, user-friendly component after a search is performed.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "hits": {
+                        "type": "array",
+                        "description": "An array of car listing objects found in the search.",
+                        "items": {"type": "object"},
+                    },
+                    "total_documents": {
+                        "type": "number",
+                        "description": "The total number of vehicles found.",
+                    },
+                    "search_time_ms": {
+                        "type": "number",
+                        "description": "The search execution time in milliseconds.",
+                    },
+                    "facet_counts": {
+                        "type": "array",
+                        "description": "Data for filtering, like brands and models.",
+                        "items": {"type": "object"},
+                    },
+                },
+                "required": [
+                    "total_documents",
+                    "search_time_ms",
+                    "hits",
+                ],
+            },
+        },
+    }
+]
+
 
 @cl.oauth_callback
 def oauth_callback(
@@ -41,391 +72,307 @@ def oauth_callback(
 
 @cl.on_mcp_connect
 async def on_mcp_connect(connection, session: ClientSession):
-    """
-    Called when a new MCP connection is established.
-    This version gracefully handles discovery of tools and prompts.
-    """
+    log.info(f"Establishing MCP connection: {connection.name}")
+
     await cl.Message(
         content=f"Establishing connection with MCP server: `{connection.name}`..."
     ).send()
 
     try:
         result = await session.list_tools()
+
         if result and hasattr(result, "tools") and result.tools:
-            tools_for_llm = [
-                {
-                    "type": "function",
-                    "function": {
-                        "name": t.name,
-                        "description": t.description,
-                        "parameters": t.inputSchema,
-                    },
-                }
-                for t in result.tools
-            ]
+            tools_for_llm = []
+            for tool in result.tools:
+                tools_for_llm.append(
+                    {
+                        "type": "function",
+                        "function": {
+                            "name": tool.name,
+                            "description": tool.description,
+                            "parameters": tool.inputSchema,
+                        },
+                    }
+                )
 
             all_mcp_tools = cl.user_session.get("mcp_tools", {})
             all_mcp_tools[connection.name] = tools_for_llm
             cl.user_session.set("mcp_tools", all_mcp_tools)
 
-            tool_names = [t.name for t in result.tools]
-            log.info(f"Tools loaded from {connection.name}: {', '.join(tool_names)}")
-            await cl.Message(
-                content=f"**Tools available from `{connection.name}`:**\n{', '.join(tool_names)}"
-            ).send()
-    except Exception as e:
-        log.warning(f"Could not list tools for {connection.name}: {e}")
-        log.debug(f"Full traceback for tools listing error: {traceback.format_exc()}")
-
-    try:
-        prompt_list_response = await session.send_request("prompts/list", {})
-
-        if hasattr(prompt_list_response, "prompts") and prompt_list_response.prompts:
-            all_mcp_prompts = cl.user_session.get("mcp_prompts", {})
-            all_mcp_prompts[connection.name] = prompt_list_response.prompts
-            cl.user_session.set("mcp_prompts", all_mcp_prompts)
-
-            prompt_actions = [
-                cl.Action(
-                    name="use_prompt",
-                    value=f"{connection.name}:{p.name}",
-                    label=f"/{p.name}",
-                    description=p.description or f"Execute the {p.name} prompt.",
-                )
-                for p in prompt_list_response.prompts
-            ]
+            tool_names = [tool.name for tool in result.tools]
             log.info(
-                f"Prompts loaded from {connection.name}: {[p.name for p in prompt_list_response.prompts]}"
+                f"Loaded {len(tool_names)} tools from {connection.name}: {', '.join(tool_names)}"
             )
+
             await cl.Message(
-                content=f"**Prompts available from `{connection.name}`:**",
-                actions=prompt_actions,
+                content=f"**Tools available from `{connection.name}`:**\n{', '.join(tool_names)}"
             ).send()
+        else:
+            log.info(f"No tools available from {connection.name}")
+
     except Exception as e:
-        log.warning(f"Could not list prompts for {connection.name}: {e}")
-        log.debug(f"Full traceback for prompts listing error: {traceback.format_exc()}")
+        log.error(f"Failed to list tools for {connection.name}: {str(e)}")
+
+    log.info(f"MCP connection established: {connection.name}")
 
 
 @cl.on_mcp_disconnect
 async def on_mcp_disconnect(name: str, session: ClientSession):
-    """Called when an MCP connection is terminated."""
-    log.info(f"MCP connection {name} has been disconnected")
+    log.info(f"MCP connection disconnected: {name}")
     await cl.Message(f"MCP connection `{name}` has been disconnected.").send()
+
     all_mcp_tools = cl.user_session.get("mcp_tools", {})
     if name in all_mcp_tools:
         del all_mcp_tools[name]
         cl.user_session.set("mcp_tools", all_mcp_tools)
 
-    all_mcp_prompts = cl.user_session.get("mcp_prompts", {})
-    if name in all_mcp_prompts:
-        del all_mcp_prompts[name]
-        cl.user_session.set("mcp_prompts", all_mcp_prompts)
-
 
 @cl.on_chat_start
 async def start():
     log.info("Chat session started")
     await cl.Message(content="# Welcome to Naked Insurance! How can I help?").send()
+
     cl.user_session.set(
         "message_history",
         [
             {
                 "role": "system",
-                "content": "You are a helpful AI assistant. Please provide accurate and helpful responses to user questions. You have access to tools. You should always understand the tools, and use these tools where possible first. ",
+                "content": """You are a helpful AI assistant for Naked Insurance. When a user asks for cars or vehicle searches, you MUST follow this exact workflow:
+
+1. First, use the 'search-cars' tool to find vehicles matching their criteria
+2. Then, you MUST immediately use the 'show_car_search_results' tool to display the results in a visual component
+3. Finally, provide a brief summary of what was found
+
+For other queries, provide accurate and helpful responses. Always use available tools when they can help answer the user's question. If there are context tools like 'get-context' or 'vehicle-search-context', use them at the start to understand the available data.""",
             }
         ],
     )
     cl.user_session.set("mcp_tools", {})
-    cl.user_session.set("mcp_prompts", {})
-
 
-async def execute_tool_call(tool_call: Any):
-    """
-    Helper function to find the correct MCP session, execute a tool call,
-    and robustly serialize the result for both the UI and the LLM.
-    """
-    tool_name = tool_call.function.name
-    tool_args_str = tool_call.function.arguments
 
-    history = cl.user_session.get("message_history")
-
-    mcp_connection_name = None
-    all_mcp_tools = cl.user_session.get("mcp_tools", {})
-    for conn_name, tools in all_mcp_tools.items():
-        if any(t["function"]["name"] == tool_name for t in tools):
-            mcp_connection_name = conn_name
-            break
-
-    if not mcp_connection_name:
-        error_msg = f"Tool {tool_name} not found in any active MCP connection"
-        log.error(error_msg)
-        history.append(
-            {
-                "tool_call_id": tool_call.id,
-                "role": "tool",
-                "name": tool_name,
-                "content": f"Error: {error_msg}.",
-            }
-        )
-        cl.user_session.set("message_history", history)
-        return
-
-    async with cl.Step(type="tool", name=tool_name) as step:
-        step.input = json.loads(tool_args_str)
-
-        try:
-            mcp_session, _ = cl.context.session.mcp_sessions.get(mcp_connection_name)
-            tool_args = json.loads(tool_args_str)
-            tool_result = await mcp_session.call_tool(tool_name, tool_args)
-
-            content = tool_result.content
-            output_for_step = content  # Default to showing raw content
-            output_for_llm = str(content)  # Default to string for LLM
-
-            if (
-                isinstance(content, list)
-                and len(content) > 0
-                and hasattr(content[0], "text")
-            ):
-                text_content = content[0].text
-                output_for_llm = text_content  # LLM always gets the original string
-
-                # ✅ **THIS IS THE FIX**
-                # Try to parse the text as JSON for a nice UI display.
-                try:
-                    output_for_step = json.loads(text_content)
-                except json.JSONDecodeError:
-                    # If it's not valid JSON, it's just plain text.
-                    output_for_step = text_content
-
-            # Set the step output for the UI
-            step.output = output_for_step
-
-            # Append the string version to history for the LLM
-            history.append(
-                {
-                    "tool_call_id": tool_call.id,
-                    "role": "tool",
-                    "name": tool_name,
-                    "content": output_for_llm,
-                }
-            )
+async def show_car_search_results(
+    total_documents, search_time_ms, hits=None, facet_counts=None
+):
+    """Display car search results using the custom CarSearchResults component"""
+    props = {
+        "total_documents": total_documents,
+        "search_time_ms": search_time_ms,
+        "facet_counts": facet_counts or [],
+        "hits": hits or [],
+    }
 
-        except Exception as e:
-            error_msg = f"Error executing tool `{tool_name}`: {traceback.format_exc()}"
-            step.error = str(e)
-            history.append(
-                {
-                    "tool_call_id": tool_call.id,
-                    "role": "tool",
-                    "name": tool_name,
-                    "content": error_msg,
-                }
-            )
+    car_results_element = cl.CustomElement(name="CarSearchResults", props=props)
+    await cl.Message(
+        content="", 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"
 
-    cl.user_session.set("message_history", history)
 
+@cl.on_message
+async def main(message: cl.Message):
+    history = cl.user_session.get("message_history")
+    history.append({"role": "user", "content": message.content})
 
-@cl.action_callback("use_prompt")
-async def use_prompt(action: cl.Action):
-    """
-    Handles the execution of a user-selected prompt with robust message parsing.
-    """
     try:
-        connection_name, prompt_name = action.value.split(":", 1)
-        log.info(f"Executing prompt {prompt_name} from connection {connection_name}")
-    except ValueError:
-        error_msg = f"Invalid action value: {action.value}"
-        log.error(error_msg)
-        await cl.ErrorMessage(content=error_msg).send()
-        return
-
-    async with cl.Step(type="run", name=f"Prompt: /{prompt_name}") as step:
-        try:
-            mcp_session, _ = cl.context.session.mcp_sessions.get(connection_name)
-            if not mcp_session:
-                raise ValueError(f"No active MCP session found for '{connection_name}'")
-
-            all_prompts = cl.user_session.get("mcp_prompts", {})
-            prompt_def = next(
-                (
-                    p
-                    for p in all_prompts.get(connection_name, [])
-                    if p.name == prompt_name
-                ),
-                None,
-            )
-
-            prompt_args = {}
-            if prompt_def and hasattr(prompt_def, "arguments") and prompt_def.arguments:
-                step.input = "Gathering arguments from user..."
-                log.debug(
-                    f"Prompt {prompt_name} requires arguments: {[arg.name for arg in prompt_def.arguments]}"
-                )
-                for arg in prompt_def.arguments:
-                    if arg.required:
-                        res = await cl.AskUserMessage(
-                            content=f"Please provide a value for `{arg.name}`:\n_{arg.description or ''}_",
-                            timeout=180,
-                        ).send()
-                        if res:
-                            prompt_args[arg.name] = res["output"]
-                        else:
-                            log.warning(
-                                f"Prompt {prompt_name} cancelled due to timeout"
-                            )
-                            await cl.Message(
-                                content="Prompt cancelled due to timeout."
-                            ).send()
-                            return
-
-            step.input = f"Connection: {connection_name}\nPrompt: {prompt_name}\nArguments: {prompt_args}"
-
-            prompt_result = await mcp_session.send_request(
-                "prompts/get", {"name": prompt_name, "arguments": prompt_args}
-            )
-
-            if not hasattr(prompt_result, "messages"):
-                raise ValueError(
-                    "MCP server did not return valid messages for the prompt."
-                )
-
-            def message_to_dict(msg):
-                role = getattr(msg, "role", "user")
-                content_obj = getattr(msg, "content", "")
-
-                if isinstance(content_obj, str):
-                    return {"role": role, "content": content_obj}
-
-                if hasattr(content_obj, "text"):
-                    return {"role": role, "content": content_obj.text}
-
-                return {"role": role, "content": str(content_obj)}
-
-            llm_messages = [message_to_dict(msg) for msg in prompt_result.messages]
-            log.debug(
-                f"Generated {len(llm_messages)} messages from prompt {prompt_name}"
-            )
-
-            final_response_message = cl.Message(content="", author="Assistant")
-            stream = await openai_client.chat.completions.create(
-                model="gpt-4o", messages=llm_messages, stream=True
+        while True:  # Start of the autonomous loop
+            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
+            ]
+            aggregated_tools.extend(local_tools)
+
+            # First call to OpenAI
+            response = await openai_client.chat.completions.create(
+                model="gpt-4o",
+                messages=history,
+                tools=aggregated_tools if aggregated_tools else None,
+                tool_choice="auto",
             )
 
-            async for part in stream:
-                if token := part.choices[0].delta.content or "":
-                    await final_response_message.stream_token(token)
-
-            await final_response_message.update()
-            step.output = final_response_message.content
-            log.info(f"Prompt {prompt_name} executed successfully")
+            response_message = response.choices[0].message
 
-        except Exception as e:
-            error_message = f"Error executing prompt /{prompt_name}: {str(e)}"
-            log.error(error_message)
-            log.error(f"Full traceback: {traceback.format_exc()}")
-            step.error = error_message
-            await cl.ErrorMessage(content=str(e)).send()
+            if not response_message.tool_calls:
+                # If no tool calls, it's the final answer. Stream it to the user.
+                final_answer = response_message.content
 
+                # Stream the response for better UX
+                msg = cl.Message(content="")
+                await msg.send()
 
-@cl.on_message
-async def main(message: cl.Message):
-    log.debug(f"Received message: {message.content[:100]}...")  # Log first 100 chars
+                # Stream the content token by token
+                for i, char in enumerate(final_answer):
+                    await msg.stream_token(char)
+                    # Small delay for better streaming effect (optional)
+                    if i % 10 == 0:  # Every 10 characters
+                        await cl.sleep(0.01)
 
-    history = cl.user_session.get("message_history")
-    history.append({"role": "user", "content": message.content})
+                await msg.update()
 
-    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
-    ]
+                history.append({"role": "assistant", "content": final_answer})
+                break
 
-    log.debug(f"Available tools: {len(aggregated_tools)}")
+            # If there are tool calls, process them
+            history.append(response_message)  # Add assistant's tool request to history
 
-    try:
-        stream = await openai_client.chat.completions.create(
-            model="gpt-4o",
-            messages=history,
-            tools=aggregated_tools if aggregated_tools else None,
-            stream=True,
-        )
-
-        output_message = cl.Message(content="", author="Assistant")
-        tool_calls = []
-        tool_calls_buffer = {}
-
-        async for part in stream:
-            delta = part.choices[0].delta
-            if delta.content:
-                await output_message.stream_token(delta.content)
-
-            if delta.tool_calls:
-                for tool_call_chunk in delta.tool_calls:
-                    index = tool_call_chunk.index
-                    if index not in tool_calls_buffer:
-                        tool_calls_buffer[index] = {
-                            "id": tool_call_chunk.id or "",
-                            "type": "function",
-                            "function": {
-                                "name": tool_call_chunk.function.name or "",
-                                "arguments": "",
-                            },
-                        }
-
-                    if tool_call_chunk.function.arguments:
-                        tool_calls_buffer[index]["function"][
-                            "arguments"
-                        ] += tool_call_chunk.function.arguments
-
-        if output_message.content:
-            await output_message.update()
-
-        if tool_calls_buffer:
-            log.info(f"Processing {len(tool_calls_buffer)} tool calls")
-            assistant_message = {"role": "assistant", "content": None, "tool_calls": []}
-            for index in sorted(tool_calls_buffer.keys()):
-                assistant_message["tool_calls"].append(tool_calls_buffer[index])
-
-            history.append(assistant_message)
-
-            for tool_call_dict in assistant_message["tool_calls"]:
-                from pydantic import BaseModel
-
-                class Func(BaseModel):
-                    name: str
-                    arguments: str
-
-                class ToolCall(BaseModel):
-                    id: str
-                    function: Func
-                    type: str
-
-                tool_call_obj = ToolCall(**tool_call_dict)
-                await execute_tool_call(tool_call_obj)
-
-            final_stream = await openai_client.chat.completions.create(
-                model="gpt-4o", messages=history, stream=True
-            )
-            final_output_message = cl.Message(content="", author="Assistant")
-            async for part in final_stream:
-                if token := part.choices[0].delta.content or "":
-                    await final_output_message.stream_token(token)
-
-            await final_output_message.update()
-            history.append(
-                {"role": "assistant", "content": final_output_message.content}
-            )
-            log.debug("Tool calls processed and response generated")
+            for tool_call in response_message.tool_calls:
+                tool_name = tool_call.function.name
+                tool_output = ""
 
-        else:
-            history.append({"role": "assistant", "content": output_message.content})
+                try:
+                    tool_args = json.loads(tool_call.function.arguments)
+
+                    # --- Start of New Logic ---
+                    # Special, direct handling for the search-cars tool
+                    if tool_name == "search-cars":  # Use your actual search tool name
+                        log.info(
+                            f"Intercepting call to '{tool_name}' to manage data flow."
+                        )
+                        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 mcp_connection_name:
+                            mcp_session, _ = cl.context.session.mcp_sessions.get(
+                                mcp_connection_name
+                            )
+                            result = await mcp_session.call_tool(tool_name, tool_args)
+
+                            # Extract JSON data from MCP result
+                            raw_json_output = None
+                            if hasattr(result, "content") and result.content:
+                                if len(result.content) > 0 and hasattr(
+                                    result.content[0], "text"
+                                ):
+                                    raw_json_output = result.content[0].text
+                                else:
+                                    log.warning(
+                                        f"Unexpected content structure: {result.content}"
+                                    )
+                            else:
+                                raw_json_output = str(result)
+
+                            if not raw_json_output or raw_json_output.strip() == "":
+                                log.error("Empty or null response from search tool")
+                                tool_output = (
+                                    "Error: Search tool returned empty response."
+                                )
+                            else:
+                                # Check if the response looks like an error message instead of JSON
+                                if (
+                                    raw_json_output.startswith("Error")
+                                    or "Request failed" in raw_json_output
+                                ):
+                                    log.warning(
+                                        f"Search tool returned error: {raw_json_output}"
+                                    )
+                                    tool_output = f"Search failed: {raw_json_output}"
+                                else:
+                                    try:
+                                        # Parse the data and call the display component immediately
+                                        search_data = json.loads(raw_json_output)
+                                        # Limit to top 5 results
+                                        all_hits = search_data.get("hits", [])
+                                        top_5_hits = all_hits[:5]
+
+                                        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=top_5_hits,
+                                        )
+                                        # Provide a simple confirmation message back to the AI
+                                        total_found = search_data.get("found", 0)
+                                        displayed_count = len(top_5_hits)
+                                        tool_output = f"Search complete. Showing top {displayed_count} of {total_found} cars found."
+                                    except json.JSONDecodeError as e:
+                                        log.error(f"JSON decode error: {e}")
+                                        log.error(
+                                            f"Raw output that failed to parse: '{raw_json_output}'"
+                                        )
+                                        tool_output = f"Search failed - invalid response format. Please try again with specific search criteria (e.g., 'BMW', 'Toyota under R200k', etc.)"
+                                    except Exception as e:
+                                        log.error(
+                                            f"Failed to parse search result and display component: {e}"
+                                        )
+                                        tool_output = f"Error: Failed to process search results - {str(e)}"
+                        else:
+                            tool_output = f"Error: Tool {tool_name} not found."
+
+                    # Special handling for local component
+                    elif tool_name == "show_car_search_results":
+                        # This will now likely be called less often, but we keep the logic
+                        # in case the AI decides to call it directly with its own data.
+                        log.info(f"Executing local tool: {tool_name}")
+                        await show_car_search_results(**tool_args)
+                        tool_output = f"Successfully displayed {len(tool_args.get('hits',[]))} cars in the custom component."
+                    else:
+                        # Generic handling for MCP tools with cleaner connection lookup
+                        log.info(f"Executing MCP tool: {tool_name}")
+
+                        # Cleaner MCP connection lookup using next() generator expression
+                        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 mcp_connection_name:
+                            mcp_session, _ = cl.context.session.mcp_sessions.get(
+                                mcp_connection_name
+                            )
+                            result = await mcp_session.call_tool(tool_name, tool_args)
+                            # Extract text from result if necessary
+                            if (
+                                hasattr(result, "content")
+                                and result.content
+                                and hasattr(result.content[0], "text")
+                            ):
+                                tool_output = result.content[0].text
+                            else:
+                                tool_output = str(result)
+                        else:
+                            tool_output = f"Error: Tool {tool_name} not found in any MCP connection."
+                    # --- End of New Logic ---
+
+                except json.JSONDecodeError as e:
+                    log.error(f"Invalid JSON arguments for tool {tool_name}: {e}")
+                    tool_output = f"Error: Invalid arguments provided for tool {tool_name}. Please check the format."
+
+                except Exception as e:
+                    log.error(f"Error executing tool {tool_name}: {e}")
+                    tool_output = f"Error executing tool {tool_name}: {str(e)}"
+
+                # Add tool result to history for the next loop iteration
+                history.append(
+                    {
+                        "tool_call_id": tool_call.id,
+                        "role": "tool",
+                        "name": tool_name,
+                        "content": tool_output,
+                    }
+                )
 
     except Exception as e:
-        error_msg = f"Error processing message: {str(e)}"
-        log.error(error_msg)
-        log.error(f"Full traceback: {traceback.format_exc()}")
-        await cl.ErrorMessage(
-            content="Sorry, an error occurred while processing your message. Please try again."
+        log.error(f"Error in main message loop: {e}")
+        traceback.print_exc()
+        await cl.Message(
+            content=f"I encountered an error while processing your request: {str(e)}. Please try again."
         ).send()
 
     cl.user_session.set("message_history", history)

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./public/*"]
+    }
+  }
+} 

public/components/ui/badge.jsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react"
+
+const badgeVariants = {
+  default: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+  secondary: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  destructive: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+  outline: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground"
+}
+
+const Badge = forwardRef(({ className = "", variant = "default", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`${badgeVariants[variant]} ${className}`}
+      {...props}
+    />
+  )
+})
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants } 

public/components/ui/card.jsx

@@ -0,0 +1,41 @@
+import { forwardRef } from "react"
+
+const Card = forwardRef(({ className = "", ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = forwardRef(({ className = "", ...props }, ref) => (
+  <div ref={ref} className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = forwardRef(({ className = "", ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = forwardRef(({ className = "", ...props }, ref) => (
+  <p ref={ref} className={`text-sm text-muted-foreground ${className}`} {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = forwardRef(({ className = "", ...props }, ref) => (
+  <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = forwardRef(({ className = "", ...props }, ref) => (
+  <div ref={ref} className={`flex items-center p-6 pt-0 ${className}`} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 

public/elements/CarSearchResults.jsx

@@ -0,0 +1,154 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { MapPin, Calendar, Gauge, Heart, MoreHorizontal } from "lucide-react"
+
+export default function CarSearchResults(props) {
+  const formatPrice = (priceInCents) => {
+    return `R ${new Intl.NumberFormat().format(priceInCents / 100)}`
+  }
+
+  const formatMileage = (mileageInKm) => {
+    return `${new Intl.NumberFormat().format(mileageInKm)} km`
+  }
+
+  const getConditionColor = (condition) => {
+    const colors = {
+      '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()]?.toUpperCase() || 'bg-gray-100 text-gray-800'
+  }
+
+  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 cars = props.hits || []
+
+console.log(props);
+
+  return (
+    <div className="w-full max-w-4xl mx-auto space-y-4">
+      {/* Header */}
+      <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-gray-600">
+          Search completed in {props.search_time_ms || 0}ms
+        </p>
+      </div>
+
+      {/* 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>
+
+              {/* 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>
+
+                {/* 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>
+                  )}
+
+                  <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>
+
+                {/* 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>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* 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>
+  )
+}