Re-styled the weather widget, supported multi-day function call

Author: chriscarrollsmith

main.py

@@ -8,6 +8,7 @@
 from fastapi.responses import RedirectResponse
 from routers import chat, files, api_keys, assistants
 from utils.threads import create_thread
+from fastapi.exceptions import HTTPException
 
 
 logger = logging.getLogger("uvicorn.error")
@@ -32,6 +33,25 @@ async def lifespan(app: FastAPI):
 # Initialize Jinja2 templates
 templates = Jinja2Templates(directory="templates")
 
+@app.exception_handler(Exception)
+async def general_exception_handler(request: Request, exc: Exception):
+    logger.error(f"Unhandled error: {exc}")
+    return templates.TemplateResponse(
+        "error.html",
+        {"request": request, "error_message": str(exc)},
+        status_code=500
+    )
+
+@app.exception_handler(HTTPException)
+async def http_exception_handler(request: Request, exc: HTTPException):
+    logger.error(f"HTTP error: {exc.detail}")
+    return templates.TemplateResponse(
+        "error.html",
+        {"request": request, "error_message": exc.detail},
+        status_code=exc.status_code
+    )
+
+
 # TODO: Implement some kind of thread id storage or management logic to allow
 # user to load an old thread, delete an old thread, etc. instead of start new
 @app.get("/")

routers/assistants.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import RedirectResponse
 from openai import AsyncOpenAI
 from utils.create_assistant import create_or_update_assistant, request
@@ -34,5 +34,7 @@ async def create_update_assistant(
         request=request,
         logger=logger
     )
+    if not assistant_id:
+        raise HTTPException(status_code=400, detail="Failed to create or update assistant")
 
     return RedirectResponse(url="/", status_code=303)

routers/chat.py

@@ -1,5 +1,6 @@
 import logging
 import time
+from datetime import datetime
 from typing import Any, AsyncGenerator
 from fastapi.templating import Jinja2Templates
 from fastapi import APIRouter, Form, Depends, Request
@@ -43,7 +44,7 @@ async def post_tool_outputs(client: AsyncOpenAI, data: dict, thread_id: str):
     data is expected to be something like
     {
       "tool_outputs": {
-        "output": {"location": "City", "temperature": 70, "conditions": "Sunny"},
+        "output": [{"location": "City", "temperature": 70, "conditions": "Sunny"}],
         "tool_call_id": "call_123"
       },
       "runId": "some-run-id",
@@ -85,7 +86,7 @@ async def send_message(
     await client.beta.threads.messages.create(
         thread_id=thread_id,
         role="user",
-        content=userInput
+        content=f"System: Today's date is {datetime.today().strftime('%Y-%m-%d')}\n{userInput}"
     )
 
     # Render the component templates with the context
@@ -255,21 +256,19 @@ async def event_generator():
                                 try:
                                     args = json.loads(tool_call.function.arguments)
                                     location = args.get("location", "Unknown")
+                                    dates = args.get("dates", [datetime.today()])
                                 except Exception as err:
                                     logger.error(f"Failed to parse function arguments: {err}")
                                     location = "Unknown"
 
-                                weather_output: dict = get_weather(location)
+                                weather_output: list[dict] = get_weather(location, dates)
                                 logger.info(f"Weather output: {weather_output}")
 
                                 # Render the weather widget
                                 weather_widget_html: str = templates.get_template(
                                     "components/weather-widget.html"
                                 ).render(
-                                    location=weather_output.get("location", "Unknown"),
-                                    temperature=weather_output.get("temperature", "Unknown"),
-                                    unit=weather_output.get("unit", "F"),  # Default to Fahrenheit
-                                    conditions=weather_output.get("conditions", "Unknown")
+                                    reports=weather_output
                                 )
 
                                 # Yield the rendered HTML

static/styles.css

@@ -416,7 +416,6 @@ pre {
   display: flex;
   flex-direction: column;
   order: 2;
-  white-space: pre-wrap;
 }
 
 .userMessage,
@@ -505,15 +504,18 @@ pre {
 
 .toolOutput {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: space-between;
   padding: 10px;
   border-radius: var(--border-radius);
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   margin-bottom: 10px;
   gap: 10px;
+  width: fit-content;
+  height: fit-content;
+  color: #333;
 }
 
 .toolOutput h2,
@@ -522,6 +524,7 @@ pre {
   padding: 0 10px;
   flex: 1;
   text-align: center;
+  color: #333;
 }
 
 @media (max-width: 600px) {
@@ -536,3 +539,31 @@ pre {
     padding: 5px 0;
   }
 }
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.weatherReport {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.weatherContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  justify-content: flex-start;
+}
+
+.location {
+  flex: 0 0 auto;
+}
+
+.reports {
+  flex: 1;
+}

templates/components/weather-widget.html

@@ -1,9 +1,19 @@
 <!-- weather-widget.html -->
 <div class="toolOutput">
-  <!-- Location -->
-  <h2>{{location}}</h2>
-  <!-- Temperature -->
-  <p>{{temperature}}&deg;{{unit}}</p>
-  <!-- Conditions -->
-  <p>{{conditions}}</p>
+  <div class="weatherContainer">
+    <!-- Location -->
+    <div class="location"><h2>{{ reports[0].location }}</h2></div>
+    <div class="reports">
+      {% for report in reports %}
+      <div class="weatherReport">
+        <!-- Date -->
+        <p>{{ report.date }}</p>
+        <!-- Temperature -->
+        <p>{{ report.temperature }}&deg;{{ report.unit }}</p>
+        <!-- Conditions -->
+        <p>{{ report.conditions }}</p>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
 </div>

templates/error.html

@@ -0,0 +1,9 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <div class="error-container">
+        <h1>An Error Occurred</h1>
+        <p>{{ error_message }}</p>
+        <a href="/">Return to Home</a>
+    </div>
+{% endblock %}

utils/create_assistant.py

@@ -27,9 +27,17 @@
                         "location": {
                             "type": "string",
                             "description": "The city and state e.g. San Francisco, CA"
+                        },
+                        "dates": {
+                            "type": "array",
+                            "description": "The dates (\"YYYY-MM-DD\") to get weather for",
+                            "items": {
+                                "type": "string"
+                            }
                         }
                     },
-                    "required": ["location"],
+                    # Currently OpenAI requires that all properties be required
+                    "required": ["location", "dates"],
                     "additionalProperties": False,
                 },
                 strict=True,

utils/custom_functions.py

@@ -1,27 +1,39 @@
 import random
 import logging
+from datetime import datetime
 
 logger = logging.getLogger("uvicorn.error")
 
-def get_weather(location):
+def get_weather(location, dates: list[str | datetime] = [datetime.today()]):
     """
-    Generate a random weather report for a given location.
+    Generate random weather reports for a given location over a date range.
 
     Args:
         location (str): The location for which to generate the weather report.
+        start_date (datetime, optional): The start date for the weather report range.
+        end_date (datetime, optional): The end date for the weather report range. Defaults to today.
 
     Returns:
-        dict: A dictionary containing the location, temperature, unit, and conditions.
+        list: A list of dictionaries, each containing the location, date, temperature, unit, and conditions.
     """
-    # Choose a random temperature and condition
-    random_temperature = random.randint(50, 80)
-    conditions = ["Cloudy", "Sunny", "Rainy", "Snowy", "Windy"]
-    random_condition = random.choice(conditions)
-
-    return {
-        "location": location,
-        "temperature": random_temperature,
-        "unit": "F",
-        "conditions": random_condition,
-    }
+    weather_reports = []
+
+    for date in dates:
+        if isinstance(date, datetime):
+            date = date.strftime("%Y-%m-%d")
+
+        # Choose a random temperature and condition
+        random_temperature = random.randint(50, 80)
+        conditions = ["Cloudy", "Sunny", "Rainy", "Snowy", "Windy"]
+        random_condition = random.choice(conditions)
+
+        weather_reports.append({
+            "location": location,
+            "date": date,
+            "temperature": random_temperature,
+            "unit": "F",
+            "conditions": random_condition,
+        })
+
+    return weather_reports