From c29914f240f3b901ba4429c25adbe9aafb325698 Mon Sep 17 00:00:00 2001
From: Benson Wally Tran <bewallyt@gmail.com>
Date: Sat, 18 Nov 2023 20:32:45 -0600
Subject: [PATCH] todos for patricio to add images

---
 components/generate/GenerateStoryContext.tsx | 42 +++++++++++---------
 components/pdf/StoryPDFViewer.tsx            |  2 +
 operations/chatOperations.ts                 |  7 ++++
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/generate/GenerateStoryContext.tsx b/components/generate/GenerateStoryContext.tsx
index 3f1814472..251161cd5 100644
--- a/components/generate/GenerateStoryContext.tsx
+++ b/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
diff --git a/components/pdf/StoryPDFViewer.tsx b/components/pdf/StoryPDFViewer.tsx
index 9717654f7..9c66ea2a4 100644
--- a/components/pdf/StoryPDFViewer.tsx
+++ b/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>
diff --git a/operations/chatOperations.ts b/operations/chatOperations.ts
index aa3bd31c2..98db5ddf0 100644
--- a/operations/chatOperations.ts
+++ b/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(