Merge pull request #78 from auth0-lab/events-review

updating events

lib/market/stocks.ts

@@ -3,13 +3,29 @@ import data from "./stocks.json";
 export async function getStockPrices({ symbol }: { symbol: string }) {
   await new Promise((resolve) => setTimeout(resolve, 1000));
 
-  const result = data.find(
-    (stock) => stock.symbol.toLowerCase() === symbol.toLowerCase()
-  );
+  const result = data.find((stock) => stock.symbol.toLowerCase() === symbol.toLowerCase());
 
   if (!result) {
     throw new Error(`Stock ${symbol} not found`);
   }
 
   return result;
 }
+
+export async function getCompanyInfo({ symbol }: { symbol: string }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  const result = data.find((stock) => stock.symbol.toLowerCase() === symbol.toLowerCase());
+
+  if (!result) {
+    throw new Error(`Stock ${symbol} not found`);
+  }
+
+  return {
+    symbol: result.symbol,
+    shortname: result.shortname,
+    longname: result.longname,
+    industry: result.industry,
+    sector: result.sector,
+  };
+}

llm/components/calendar-events.tsx

@@ -4,6 +4,7 @@ import { format, parseISO } from "date-fns";
 import { useState } from "react";
 
 import { GoogleCalendarIcon } from "@/components/icons";
+import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { EnsureAPIAccess } from "@/sdk/components/ensure-api-access";
 
@@ -13,10 +14,12 @@ import { NotAvailableReadOnly } from "./not-available-read-only";
 export function CalendarEvents({
   events,
   checkAvailability,
+  companyName,
   readOnly = false,
 }: {
   events: Event[];
   checkAvailability: (events: Event[]) => Promise<any>;
+  companyName: string;
   readOnly?: boolean;
 }) {
   const [availability, setAvailability] = useState([]);
@@ -69,39 +72,49 @@ export function CalendarEvents({
       >
         <div className="border border-gray-300 rounded-lg p-6 flex flex-col gap-8 items-left w-full justify-between">
           <div className="flex flex-col gap-1">
-            <h2 className="text-base leading-6 font-semibold">Events available</h2>
+            <h2 className="text-base leading-6 font-semibold">Your availability</h2>
             <p className="text-sm leading-5 font-light text-gray-500">
-              See which events you can add to your calendar based on your availability.
+              This is your availability for {companyName}’s events
             </p>
           </div>
           <div>
             <ul className="flex flex-col">
               {availability.map((event: EventAvailability) => (
                 <li
                   key={event.date}
-                  className="flex gap-5 sm:gap-10 justify-between border-t border-gray-300 pt-4 pb-4 flex-col sm:flex-row"
+                  className="flex gap-5 sm:gap-10 justify-between border-t border-gray-300 pt-4 pb-4 last:pb-0 flex-col sm:flex-row"
                 >
-                  <div className="flex flex-col gap-2">
-                    <div className={cn("text-sm font-medium text-gray-800", !event.slotAvailable && "line-through")}>
-                      {event.headline}
-                    </div>
-                    <div className={cn("text-xs font-light text-gray-500", !event.slotAvailable && "line-through")}>
-                      {format(parseISO(event.date), "MMMM dd, yyyy")} from {format(parseISO(event.startDate), "hh a ")}{" "}
-                      to {format(parseISO(event.endDate), "hh a ")}
+                  <div className="flex flex-col gap-2 sm:min-w-80 sm:max-w-80">
+                    <div className={cn("text-sm font-medium text-gray-800")}>{event.headline}</div>
+                    <div className={cn("text-xs font-light text-gray-500")}>
+                      {format(parseISO(event.date), "MMMM EE dd, yyyy")} from{" "}
+                      {format(parseISO(event.startDate), "hh:mm a ")} to {format(parseISO(event.endDate), "hh:mm a ")}
                     </div>
                   </div>
-                  <div className="flex justify-center sm:justify-end items-center min-w-60">
-                    {event.slotAvailable && (
-                      <a
-                        href={getCalendarLink(event)}
-                        target="_blank"
-                        rel="noopener noreferer"
-                        className="text-sm font-medium text-blue-600"
+                  <div className="flex items-center">
+                    {!event.slotAvailable && (
+                      <Badge
+                        variant="outline"
+                        className="w-fit border-[#64748B] text-[11px] font-semibold tracking-wider uppercase px-2 py-0 hover:border-[#64748B] cursor-default"
                       >
-                        Add to my calendar
-                      </a>
+                        Conflict
+                      </Badge>
                     )}
                   </div>
+                  <div className="flex justify-center sm:justify-end items-center min-w-60">
+                    <a
+                      href={getCalendarLink(event)}
+                      target="_blank"
+                      rel="noopener noreferer"
+                      className={cn(
+                        "text-sm font-normal",
+                        event.slotAvailable ? "text-black border-black" : "text-red-400 border-red-400",
+                        "border w-full text-center rounded-md py-2 sm:rounded-none sm:w-fit sm:border-none"
+                      )}
+                    >
+                      {event.slotAvailable ? "Add to my calendar" : "Add anyways"}
+                    </a>
+                  </div>
                 </li>
               ))}
             </ul>

llm/components/events.tsx

@@ -14,7 +14,15 @@ interface Event {
   description: string;
 }
 
-export function Events({ events, readOnly = false }: { events: Event[]; readOnly?: boolean }) {
+export function Events({
+  events,
+  companyName,
+  readOnly = false,
+}: {
+  events: Event[];
+  companyName: string;
+  readOnly?: boolean;
+}) {
   return (
     <div className="flex flex-col gap-4">
       <WarningWrapper readOnly={readOnly}>
@@ -39,7 +47,12 @@ export function Events({ events, readOnly = false }: { events: Event[]; readOnly
         </div>
       </WarningWrapper>
 
-      <CalendarEvents events={events} checkAvailability={checkAvailabilityForEvents} readOnly={readOnly} />
+      <CalendarEvents
+        events={events}
+        checkAvailability={checkAvailabilityForEvents}
+        companyName={companyName}
+        readOnly={readOnly}
+      />
     </div>
   );
 }

llm/tools/schedule/get-events.tsx

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import { getCompanyInfo } from "@/lib/market/stocks";
 import { defineTool } from "@/llm/ai-helpers";
 import { Events } from "@/llm/components/events";
 import { EventsSkeleton } from "@/llm/components/events-skeleton";
@@ -14,28 +15,44 @@ export default defineTool("get_events", () => {
       "en-CA"
     )}"`,
     parameters: z.object({
+      symbol: z.string().describe("The name or symbol of the stock. e.g. DOGE/AAPL/USD."),
       events: z.array(
         z.object({
-          date: z.string().describe("The date of the event, in ISO-8601 format"),
-          startDate: z.string().describe("The start time of the event"),
-          endDate: z.string().describe("The end time of the event no more that 2 hours after the start time"),
+          date: z.string().describe("The date of the event, only weekdays, in ISO-8601 format"),
+          startDate: z
+            .string()
+            .describe(
+              "The start time of the event in ISO 8601 format (UTC), ensuring it falls on a weekday and during standard working hours (9 AM to 5 PM)"
+            ),
+          endDate: z
+            .string()
+            .describe(
+              "The end time of the event in ISO 8601 format (UTC). The end time should be no more than 2 hours after the start time and should have a random duration of at least 45 minutes."
+            ),
           headline: z.string().describe("The headline of the event"),
           description: z.string().describe("The description of the event"),
         })
       ),
     }),
-    generate: async function* ({ events }) {
+    generate: async function* ({ events, symbol }) {
       yield <EventsSkeleton />;
 
+      const doc = await getCompanyInfo({ symbol });
+
+      if (!doc) {
+        history.update(`[Company not found for ${symbol}]`);
+        return <>Company not found</>;
+      }
+
       history.update({
         role: "assistant",
         componentName: serialization.names.get(Events)!,
         // intentionally avoid
-        params: { events },
+        params: { events, companyName: doc.shortname },
         content: `[Listed events: ${JSON.stringify({ events })}]`,
       });
 
-      return <Events events={events} />;
+      return <Events events={events} companyName={doc.shortname} />;
     },
   };
 });