todos for patricio to add images

components/generate/GenerateStoryContext.tsx

@@ -1,45 +1,49 @@
 'use client';
 
 import chatOperations, { IStory } from 'operations/chatOperations';
-import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from 'react';
 
 export interface IGenerateStoryContext {
   story?: IStory;
-  images: string[];
   loading: boolean;
 }
 
 const GenerateStoryContext = createContext<IGenerateStoryContext>({
   story: undefined,
-  images: [],
   loading: false
 });
 
 function GenerateStoryContextProvider({ children }: { children: PropsWithChildren<any> }) {
   const [loading, setLoading] = useState<boolean>(false);
   const [story, setStory] = useState<IStory>();
-  /*
-   Note(Benson): For now images is an array of urls where each index in the array
-   corresponds to the page number. 
-   i.e., index 0 could be title, index 1 is the first page in pages, etc.
-   */
-  const [images, setImages] = useState<string[]>([]);
 
-  const value = useMemo<IGenerateStoryContext>(
-    () => ({ story, images, loading }),
-    [story, images, loading]
-  );
+  const value = useMemo<IGenerateStoryContext>(() => ({ story, loading }), [story, loading]);
+
+  /*
+  TODO(Benson -> Patricio): Make network call to get images
+  TODO(Benson -> Patricio): Write a helper function in this directory /generate/utils.ts
+  called mergeImages(story: IStory, images: string[]): IStory;
+  */
+  const getStoryAsync = useCallback(async () => {
+    setLoading(true);
+    const story = await chatOperations.createStoryAsync();
+    // const images = await imageOperations.getStoryImagesAsync(story);
+    setStory(story);
+    setLoading(false);
+  }, []);
 
   return (
     <GenerateStoryContext.Provider value={value}>
       <>
         <button
-          onClick={async () => {
-            setLoading(true);
-            const story = await chatOperations.createStoryAsync();
-            setStory(story);
-            setLoading(false);
-          }}
+          onClick={getStoryAsync}
           className="absolute right-24 top-5 z-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
         >
           Run A New Story

components/pdf/StoryPDFViewer.tsx

@@ -123,6 +123,8 @@ Note(Benson): PDFTest has some hardcoded implementation of generating random sec
 Right now for the Story viewer just render all the text at the bottom until we come up 
 with a solidified way at dispersing the text throughout the page.
 */
+
+// TODO(Benson -> Patricio): replace hardcoded images.
 const Document = ({ pages }: { pages: { text: string }[] }) => {
   return (
     <PDFDocument>

operations/chatOperations.ts

@@ -17,13 +17,20 @@ function getFunctionCallArguments<T>(response: any) {
   return JSON.parse(response.text.function_call.arguments);
 }
 
+/*
+ TODO(Benson -> Patricio): update this typing? add images to pages? assuming images 
+ and pages are 1:1? that means we should probably also have a titleImage property too then?
+ Added dummy filler.
+ */
 export interface IStory {
   title: string;
+  // titleImage?: string;
   topic: string;
   introduction: string;
   narrativeStructure: string;
   archetypes_characters: string;
   pages: { text: string }[];
+  // pages: { text: string, image?: string }[];
 }
 
 async function createStoryAsync(