Add handleSubmitAuth function to manage authentication and image proc…

…essing in Home component

app/page.tsx

@@ -12,7 +12,7 @@ import modelsList from "@/lib/models.json";
 import templates, { TemplateId } from "@/lib/templates";
 import { ChatSettings } from "@/components/chat-settings";
 import { LLMModelConfig } from "@/lib/models";
-import { Message, toAISDKMessages } from "@/lib/messsages";
+import { Message, toAISDKMessages, toMessageImage } from "@/lib/messsages";
 import { DeepPartial } from "ai";
 import { CapsuleSchema, capsuleSchema as schema } from "@/lib/schema";
 import { experimental_useObject as useObject } from "ai/react";
@@ -143,6 +143,27 @@ export default function Home() {
     setChatInput(e.target.value);
   }
 
+  async function handleSubmitAuth(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    if (session) {
+      return setAuthDialog(false);
+    }
+
+    if (isLoading) {
+      stop();
+    }
+
+    const content: Message["content"] = [{ type: "text", text: chatInput }];
+    const images = await toMessageImage(files);
+
+    if (images.length > 0) {
+      images.forEach((image) => {
+        content.push({ type: "image", image });
+      });
+    }
+  }
+
   return (
     <main className="flex min-h-screen max-h-screen">
       {supabase && (

lib/messsages.tsx

@@ -38,3 +38,16 @@ export function toAISDKMessages(messages: Message[]) {
     });
   });
 }
+
+export async function toMessageImage(files: File[]) {
+  if (files.length === 0) {
+    return [];
+  }
+
+  return Promise.all(
+    files.map(async (file) => {
+      const base64 = Buffer.from(await file.arrayBuffer()).toString("base64");
+      return `data:${file.type};base64,${base64}`;
+    })
+  );
+}