update OpenAI demo app

Author: vincanger

app/main.wasp

@@ -82,7 +82,7 @@ app SaaSTemplate {
     ("headlessui", "^0.0.0"),
     ("@faker-js/faker", "8.3.1"),
     ("@google-analytics/data", "4.1.0"),
-    ("openai", "^4.24.1"),
+    ("openai", "^4.28.0"),
     ("prettier", "3.1.1"),
     ("prettier-plugin-tailwindcss", "0.5.11"),
     ("zod", "3.22.4"),

app/src/client/app/DemoAppPage.tsx

@@ -8,18 +8,21 @@ import getAllTasksByUser from '@wasp/queries/getAllTasksByUser';
 import { Task } from '@wasp/entities';
 import { CgSpinner } from 'react-icons/cg';
 import { TiDelete } from 'react-icons/ti';
+import { type GeneratedSchedule } from '../../shared/types';
+import { MainTask, Subtask } from '@wasp/shared/types';
 
 export default function DemoAppPage() {
   return (
     <div className='py-10 lg:mt-10'>
       <div className='mx-auto max-w-7xl px-6 lg:px-8'>
         <div className='mx-auto max-w-4xl text-center'>
           <h2 className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-white'>
-            <span className='text-yellow-500'>AI</span> Day  Scheduler
+            <span className='text-yellow-500'>AI</span> Day Scheduler
           </h2>
         </div>
         <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
-          This example app uses OpenAI's chat completions with function calling to return a structured JSON object. Try it out, enter your day's tasks, and let AI do the rest!
+          This example app uses OpenAI's chat completions with function calling to return a structured JSON object. Try
+          it out, enter your day's tasks, and let AI do the rest!
         </p>
         {/* begin AI-powered Todo List */}
         <div className='my-8 border rounded-3xl border-gray-900/10 dark:border-gray-100/10'>
@@ -36,9 +39,7 @@ export default function DemoAppPage() {
 type TodoProps = Pick<Task, 'id' | 'isDone' | 'description' | 'time'>;
 
 function Todo({ id, isDone, description, time }: TodoProps) {
-  const handleCheckboxChange = async (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleCheckboxChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     await updateTask({
       id,
       isDone: e.currentTarget.checked,
@@ -66,13 +67,7 @@ function Todo({ id, isDone, description, time }: TodoProps) {
             checked={isDone}
             onChange={handleCheckboxChange}
           />
-          <span
-            className={`text-slate-600 ${
-              isDone ? 'line-through text-slate-500' : ''
-            }`}
-          >
-            {description}
-          </span>
+          <span className={`text-slate-600 ${isDone ? 'line-through text-slate-500' : ''}`}>{description}</span>
         </div>
         <div className='flex items-center gap-2'>
           <input
@@ -86,13 +81,7 @@ function Todo({ id, isDone, description, time }: TodoProps) {
             value={time}
             onChange={handleTimeChange}
           />
-          <span
-            className={`italic text-slate-600 text-xs ${
-              isDone ? 'text-slate-500' : ''
-            }`}
-          >
-            hrs
-          </span>
+          <span className={`italic text-slate-600 text-xs ${isDone ? 'text-slate-500' : ''}`}>hrs</span>
         </div>
       </div>
       <div className='flex items-center justify-end w-15'>
@@ -104,22 +93,75 @@ function Todo({ id, isDone, description, time }: TodoProps) {
   );
 }
 
-function NewTaskForm({
-  handleCreateTask,
-}: {
-  handleCreateTask: typeof createTask;
-}) {
+function NewTaskForm({ handleCreateTask }: { handleCreateTask: typeof createTask }) {
   const [description, setDescription] = useState<string>('');
   const [todaysHours, setTodaysHours] = useState<string>('8');
-  const [response, setResponse] = useState<any>(null);
+  const [response, setResponse] = useState<GeneratedSchedule | null>({
+    mainTasks: [
+      {
+        name: 'Respond to emails',
+        priority: 'high',
+      },
+      {
+        name: 'Learn WASP',
+        priority: 'low',
+      },
+      {
+        name: 'Read a book',
+        priority: 'medium',
+      },
+    ],
+    subtasks: [
+      {
+        description: 'Read introduction and chapter 1',
+        time: 0.5,
+        mainTaskName: 'Read a book',
+      },
+      {
+        description: 'Read chapter 2 and take notes',
+        time: 0.3,
+        mainTaskName: 'Read a book',
+      },
+      {
+        description: 'Read chapter 3 and summarize key points',
+        time: 0.2,
+        mainTaskName: 'Read a book',
+      },
+      {
+        description: 'Check and respond to important emails',
+        time: 1,
+        mainTaskName: 'Respond to emails',
+      },
+      {
+        description: 'Organize and prioritize remaining emails',
+        time: 0.5,
+        mainTaskName: 'Respond to emails',
+      },
+      {
+        description: 'Draft responses to urgent emails',
+        time: 0.5,
+        mainTaskName: 'Respond to emails',
+      },
+      {
+        description: 'Watch tutorial video on WASP',
+        time: 0.5,
+        mainTaskName: 'Learn WASP',
+      },
+      {
+        description: 'Complete online quiz on the basics of WASP',
+        time: 1.5,
+        mainTaskName: 'Learn WASP',
+      },
+      {
+        description: 'Review quiz answers and clarify doubts',
+        time: 1,
+        mainTaskName: 'Learn WASP',
+      },
+    ],
+  });
   const [isPlanGenerating, setIsPlanGenerating] = useState<boolean>(false);
 
-  const { data: tasks, isLoading: isTasksLoading } =
-    useQuery(getAllTasksByUser);
-
-  useEffect(() => {
-    console.log('response', response);
-  }, [response]);
+  const { data: tasks, isLoading: isTasksLoading } = useQuery(getAllTasksByUser);
 
   const handleSubmit = async () => {
     try {
@@ -137,8 +179,7 @@ function NewTaskForm({
         hours: todaysHours,
       });
       if (response) {
-        console.log('response', response);
-        setResponse(JSON.parse(response));
+        setResponse(response);
       }
     } catch (err: any) {
       window.alert('Error: ' + (err.message || 'Something went wrong'));
@@ -179,20 +220,11 @@ function NewTaskForm({
         {tasks!! && tasks.length > 0 ? (
           <div className='space-y-4'>
             {tasks.map((task: Task) => (
-              <Todo
-                key={task.id}
-                id={task.id}
-                isDone={task.isDone}
-                description={task.description}
-                time={task.time}
-              />
+              <Todo key={task.id} id={task.id} isDone={task.isDone} description={task.description} time={task.time} />
             ))}
             <div className='flex flex-col gap-3'>
               <div className='flex items-center justify-between gap-3'>
-                <label
-                  htmlFor='time'
-                  className='text-sm text-gray-600 dark:text-gray-300 text-nowrap font-semibold'
-                >
+                <label htmlFor='time' className='text-sm text-gray-600 dark:text-gray-300 text-nowrap font-semibold'>
                   How many hours will you work today?
                 </label>
                 <input
@@ -231,87 +263,98 @@ function NewTaskForm({
 
       {!!response && (
         <div className='flex flex-col'>
-          <h3 className='text-lg font-semibold text-gray-900 dark:text-white'>
-            Today's Schedule
-          </h3>
+          <h3 className='text-lg font-semibold text-gray-900 dark:text-white'>Today's Schedule</h3>
 
-          <TaskTable schedule={response.schedule} />
+          <TaskTable schedule={response} />
         </div>
       )}
     </div>
   );
 }
 
-function TaskTable({ schedule }: { schedule: any[] }) {
+function TaskTable({ schedule }: { schedule: GeneratedSchedule }) {
   return (
     <div className='flex flex-col gap-6 py-6'>
-      {schedule.map((task: any) => (
-        <table
-          key={task.name}
-          className='table-auto w-full border-separate border border-spacing-2 rounded-md border-slate-200 shadow-sm'
-        >
-          <thead>
-            <tr>
-              <th
-                className={`flex items-center justify-between gap-5 py-4 px-3 text-slate-800 border rounded-md border-slate-200 ${
-                  task.priority === 'high'
-                    ? 'bg-red-50'
-                    : task.priority === 'low'
-                    ? 'bg-green-50'
-                    : 'bg-yellow-50'
-                }`}
-              >
-                <span>{task.name}</span>
-                <span className='opacity-70 text-xs font-medium italic'>
-                  {' '}
-                  {task.priority} priority
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className=''>
-            {task.subtasks.map((subtask: { description: any; time: any }) => (
-              <tr>
-                <td
-                  className={`flex items-center justify-between py-2 px-3 text-slate-600 border rounded-md border-purple-100 bg-purple-50`}
-                >
-                  <Subtask
-                    description={subtask.description}
-                    time={subtask.time}
-                  />
-                </td>
-              </tr>
-            ))}
+      <table className='table-auto w-full border-separate border border-spacing-2 rounded-md border-slate-200 shadow-sm'>
+        {!!schedule.mainTasks ? (
+          schedule.mainTasks
+            .map((mainTask) => <MainTask key={mainTask.name} mainTask={mainTask} subtasks={schedule.subtasks} />)
+            .sort((a, b) => {
+              const priorityOrder = ['low', 'medium', 'high'];
+              if (a.props.mainTask.priority && b.props.mainTask.priority) {
+                return (
+                  priorityOrder.indexOf(b.props.mainTask.priority) - priorityOrder.indexOf(a.props.mainTask.priority)
+                );
+              } else {
+                return 0;
+              }
+            })
+        ) : (
+          <div className='text-slate-600 text-center'>OpenAI didn't return any Main Tasks. Try again.</div>
+        )}
+      </table>
 
-            {task.breaks.map((breakItem: { description: any; time: any }) => (
-              <tr key={breakItem.description}>
-                <td
-                  className={`flex items-center justify-between py-2 px-3 text-slate-600 border rounded-md border-purple-100 bg-purple-50`}
-                >
-                  <Subtask
-                    description={breakItem.description}
-                    time={breakItem.time}
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ))}
+      {/* ))} */}
     </div>
   );
 }
 
+function MainTask({ mainTask, subtasks }: { mainTask: MainTask; subtasks: Subtask[] }) {
+  return (
+    <>
+      <thead>
+        <tr>
+          <th
+            className={`flex items-center justify-between gap-5 py-4 px-3 text-slate-800 border rounded-md border-slate-200 bg-opacity-70 ${
+              mainTask.priority === 'high'
+                ? 'bg-red-100'
+                : mainTask.priority === 'low'
+                ? 'bg-green-100'
+                : 'bg-yellow-100'
+            }`}
+          >
+            <span>{mainTask.name}</span>
+            <span className='opacity-70 text-xs font-medium italic'> {mainTask.priority} priority</span>
+          </th>
+        </tr>
+      </thead>
+      {!!subtasks ? (
+        subtasks.map((subtask) => {
+          if (subtask.mainTaskName === mainTask.name) {
+            return (
+              <tbody key={subtask.description}>
+                <tr>
+                  <td
+                    className={`flex items-center justify-between gap-4 py-2 px-3 text-slate-600 border rounded-md border-purple-100 bg-opacity-60 ${
+                      mainTask.priority === 'high'
+                        ? 'bg-red-50'
+                        : mainTask.priority === 'low'
+                        ? 'bg-green-50'
+                        : 'bg-yellow-50'
+                    }`}
+                  >
+                    <Subtask description={subtask.description} time={subtask.time} />
+                  </td>
+                </tr>
+              </tbody>
+            );
+          }
+        })
+      ) : (
+        <div className='text-slate-600 text-center'>OpenAI didn't return any Subtasks. Try again.</div>
+      )}
+    </>
+  );
+}
+
 function Subtask({ description, time }: { description: string; time: number }) {
   const [isDone, setIsDone] = useState<boolean>(false);
 
   const convertHrsToMinutes = (time: number) => {
     if (time === 0) return 0;
     const hours = Math.floor(time);
     const minutes = Math.round((time - hours) * 60);
-    return `${hours > 0 ? hours + 'hr' : ''} ${
-      minutes > 0 ? minutes + 'min' : ''
-    }`;
+    return `${hours > 0 ? hours + 'hr' : ''} ${minutes > 0 ? minutes + 'min' : ''}`;
   };
 
   const minutes = useMemo(() => convertHrsToMinutes(time), [time]);
@@ -325,17 +368,13 @@ function Subtask({ description, time }: { description: string; time: number }) {
         onChange={(e) => setIsDone(e.currentTarget.checked)}
       />
       <span
-        className={`text-slate-600 ${
+        className={`leading-tight justify-self-start w-full text-slate-600 ${
           isDone ? 'line-through text-slate-500 opacity-50' : ''
         }`}
       >
         {description}
       </span>
-      <span
-        className={`text-slate-600 ${
-          isDone ? 'line-through text-slate-500 opacity-50' : ''
-        }`}
-      >
+      <span className={`text-slate-600 text-right ${isDone ? 'line-through text-slate-500 opacity-50' : ''}`}>
         {minutes}
       </span>
     </>