hooked up weather widget

Author: chriscarrollsmith

routers/chat.py

@@ -162,6 +162,7 @@ async def handle_assistant_stream(
                             stream_name=f'toolDelta{step_counter}'
                         )
                     )
+                    time.sleep(0.25)  # Give the client time to render the message
 
                 if isinstance(event, ThreadRunStepDelta) and event.data.delta.step_details.type == "tool_calls":
                     tool_call = event.data.delta.step_details.tool_calls[0]
@@ -258,9 +259,22 @@ async def event_generator():
                                     logger.error(f"Failed to parse function arguments: {err}")
                                     location = "Unknown"
 
-                                weather_output = get_weather(location)
+                                weather_output: dict = get_weather(location)
                                 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")
+                                )
+
+                                # Yield the rendered HTML
+                                yield sse_format("toolOutput", weather_widget_html)
+
                                 data_for_tool = {
                                     "tool_outputs": {
                                         "output": str(weather_output),

static/styles.css

@@ -502,3 +502,37 @@ pre {
   text-align: center;
   margin-bottom: 8px;
 }
+
+.toolOutput {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  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);
+  margin-bottom: 10px;
+  gap: 10px;
+}
+
+.toolOutput h2,
+.toolOutput p {
+  margin: 0;
+  padding: 0 10px;
+  flex: 1;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  .toolOutput {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .toolOutput h2,
+  .toolOutput p {
+    text-align: left;
+    padding: 5px 0;
+  }
+}

templates/components/assistant-run.html

@@ -2,6 +2,6 @@
 <div class="assistant-run" hx-swap="beforeend" 
      hx-ext="sse"     
      sse-connect="/assistants/{{ assistant_id }}/messages/{{ thread_id }}/receive" 
-     sse-swap="messageCreated,toolCallCreated" 
+     sse-swap="messageCreated,toolCallCreated,toolOutput" 
      sse-close="endStream">
 </div>

templates/components/weather-widget.html

@@ -1,13 +1,9 @@
 <!-- weather-widget.html -->
-<div class="{{ 'weatherWidget' }} {{ 'weatherEmptyState' if isEmpty else conditionClassMap.get(conditions, 'weatherBGSunny') }}">
-  <div class="weatherWidgetData">
-    {% if isEmpty %}
-      <p>Enter a city to see local weather</p>
-      <p>try: what's the weather like in Berkeley?</p>
-    {% else %}
-      <p>{{ location }}</p>
-      <h2>{{ temperature if temperature != '---' else temperature }}°F</h2>
-      <p>{{ conditions }}</p>
-    {% endif %}
-  </div>
-</div>
+<div class="toolOutput">
+  <!-- Location -->
+  <h2>{{location}}</h2>
+  <!-- Temperature -->
+  <p>{{temperature}}&deg;{{unit}}</p>
+  <!-- Conditions -->
+  <p>{{conditions}}</p>
+</div>