Add LuftBnB recipe (#108)

* add luftbnb recipe
* auto-generate mock results with LLM
* add summary ui

Author: seefeldb

typescript/packages/lookslike-high-level/src/components/window-manager.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { view, tags, render, style } from "@commontools/common-ui";
+import { tags, render, style } from "@commontools/common-ui";
 import { isGem, Gem, ID } from "../recipe.js";
 const { include } = tags;
 
@@ -9,56 +9,56 @@ export class CommonWindowManager extends LitElement {
   static override styles = [
     style.baseStyles,
     css`
-    :host {
-      display: flex;
-      overflow-x: auto;
-      overflow-y: visible;
-      width: 100%;
-      height: 95vh;
-      padding: 20px 0; /* Add vertical padding */
-    }
-    .window {
-      flex: 0 0 auto;
-      width: 25%;
-      min-width: 300px;
-      height: 95%; /* Make the window full height */
-      margin-left: 20px;
-      margin-bottom: 20px;
-      border: 1px solid #e0e0e0;
-      border-radius: var(--radius);
-      background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(10px);
-      box-shadow:
-        0 10px 20px rgba(0, 0, 0, 0.1),
-        0 6px 6px rgba(0, 0, 0, 0.1),
-        0 0 0 1px rgba(0, 0, 0, 0.05);
-      transition: all 0.3s ease;
-      overflow: hidden;
-    }
-    .close-button {
-      z-index: 1;
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background-color: rgba(0, 0, 0, 0.1);
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.4);
-      font-weight: bold;
-      transition: all 0.2s ease;
-    }
-    .close-button:hover {
-      background-color: rgba(0, 0, 0, 0.15);
-      color: rgba(0, 0, 0, 0.6);
-    }
-    `
+      :host {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: visible;
+        width: 100%;
+        height: 95vh;
+        padding: 20px 0; /* Add vertical padding */
+      }
+      .window {
+        flex: 0 0 auto;
+        width: 25%;
+        min-width: 300px;
+        height: 95%; /* Make the window full height */
+        margin-left: 20px;
+        margin-bottom: 20px;
+        border: 1px solid #e0e0e0;
+        border-radius: var(--radius);
+        background-color: rgba(255, 255, 255, 0.8);
+        backdrop-filter: blur(10px);
+        box-shadow:
+          0 10px 20px rgba(0, 0, 0, 0.1),
+          0 6px 6px rgba(0, 0, 0, 0.1),
+          0 0 0 1px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+        overflow: hidden;
+      }
+      .close-button {
+        z-index: 1;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.1);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.4);
+        font-weight: bold;
+        transition: all 0.2s ease;
+      }
+      .close-button:hover {
+        background-color: rgba(0, 0, 0, 0.15);
+        color: rgba(0, 0, 0, 0.6);
+      }
+    `,
   ];
 
   @property({ type: Array })

typescript/packages/lookslike-high-level/src/data.ts

@@ -5,6 +5,7 @@ const { state } = signal;
 
 import { todoList, makeTodoItem } from "./recipes/todo-list.js";
 import { localSearch } from "./recipes/local-search.js";
+import { luftBnBSearch } from "./recipes/luft-bnb-search.js";
 
 import "./recipes/todo-list-as-task.js"; // Necessary, so that suggestions are indexed.
 
@@ -44,4 +45,31 @@ export const recipes: RecipeManifest[] = [
     recipe: localSearch,
     inputs: { query: "", location: "" },
   },
+  {
+    name: "Find a LuftBnB place to stay",
+    recipe: luftBnBSearch,
+    inputs: { ...getFridayAndMondayDateStrings(), location: "" },
+  },
 ];
+
+// Helper for mock data
+function getFridayAndMondayDateStrings() {
+  const today = new Date();
+  const daysUntilFriday = (5 - today.getDay() + 7) % 7;
+
+  const nextFriday = new Date(
+    today.getTime() + daysUntilFriday * 24 * 60 * 60 * 1000
+  );
+  const followingMonday = new Date(
+    nextFriday.getTime() + 3 * 24 * 60 * 60 * 1000
+  );
+
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split("T")[0];
+  };
+
+  return {
+    startDate: formatDate(nextFriday),
+    endDate: formatDate(followingMonday),
+  };
+}

typescript/packages/lookslike-high-level/src/llm-client.ts

@@ -8,3 +8,9 @@ export const suggestionClient = new LLMClient({
     "You are an assistant that helps match user queries to relevant data gems based on their names and types.",
   tools: [],
 });
+
+export const mockResultClient = new LLMClient({
+  serverUrl: LLM_SERVER_URL,
+  system: `Generate dummy data as JSON as per the provided spec. Use the input to imagine what an API response would look like for a request.`,
+  tools: [],
+});

typescript/packages/lookslike-high-level/src/recipes/local-search.ts

@@ -1,21 +1,50 @@
 import { view, tags } from "@commontools/common-ui";
 import { signal, stream } from "@commontools/common-frp";
+import { generateData } from "@commontools/llm-client";
 import { recipe, NAME } from "../recipe.js";
+import { mockResultClient } from "../llm-client.js";
 const { binding, repeat } = view;
 const { vstack, hstack, div, commonInput, button } = tags;
 const { state, computed } = signal;
 const { subject } = stream;
 
+export interface Place {
+  name: string;
+  description: string;
+  address: string;
+  city: string;
+  state: string;
+  zip: string;
+  latitude: number;
+  longitude: number;
+  rating: number;
+}
+
 export const localSearch = recipe("local search", ({ query, location }) => {
   // Initial search
-  const results = state(performLocalSearch(query.get(), location.get()));
+  const places = state<Place[]>([]);
+  performLocalSearch(query.get(), location.get()).then((results) =>
+    places.send(results)
+  );
 
   const search = subject<any>();
-
   search.sink({
-    send: () => results.send(performLocalSearch(query.get(), location.get())),
+    send: () =>
+      performLocalSearch(query.get(), location.get()).then((results) =>
+        places.send(results)
+      ),
   });
 
+  const summaries = computed([places], (places: Place[]) =>
+    places.map((place) => ({
+      name: place.name,
+      description: place.description,
+      address: place.address,
+      city: place.city + ", " + place.state + " " + place.zip,
+      rating: "*****".slice(0, place.rating),
+    }))
+  );
+
   return {
     UI: vstack({}, [
       hstack({}, [
@@ -40,17 +69,21 @@ export const localSearch = recipe("local search", ({ query, location }) => {
       vstack(
         {},
         repeat(
-          results,
+          summaries,
           vstack({}, [
             div({}, binding("name")),
             div({}, binding("description")),
+            div({}, binding("imageUrl")),
+            div({}, binding("address")),
+            div({}, binding("city")),
+            div({}, binding("rating")),
           ])
         )
       ),
     ]),
     query,
     location,
-    results,
+    places,
     [NAME]: computed(
       [query, location],
       (query: string, location: string) =>
@@ -59,9 +92,32 @@ export const localSearch = recipe("local search", ({ query, location }) => {
   };
 });
 
-function performLocalSearch(query: string, location: string) {
-  return [
-    { name: "Result 1", description: "Description 1" },
-    { name: "Result 2", description: "Description 2" },
-  ];
+async function performLocalSearch(
+  query: string,
+  location: string
+): Promise<Place[]> {
+  if (!query || !location) return [];
+  const result = await generateData(
+    mockResultClient,
+    `generate 10 places that match they query: ${query} in ${location}`,
+    [],
+    {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          name: { type: "string" },
+          description: { type: "string" },
+          address: { type: "string" },
+          city: { type: "string" },
+          state: { type: "string" },
+          zip: { type: "string" },
+          latitude: { type: "number" },
+          longitude: { type: "number" },
+          rating: { type: "number", minimum: 0, maximum: 5 },
+        },
+      },
+    }
+  );
+  return result as Place[];
 }