Using image with agents

export const unauthed = mutation({
  args: {
    threadId: v.string(),
    prompt: v.string(),
    imageUrls: v.array(v.string())
  },
  handler: async (ctx, { threadId, prompt, imageUrls }) => {
    // Build the message content with text and images
    const content: Array<ModelMessage> = [
      ...imageUrls.map((url) => [{
        type: "image" as const,
        image: new URL(url),
        mediaType: "image/png",
      },
      {
        type: "text" as const,
        text: `Image url: "${new URL(url)}".`
      }]).flat(),
      { type: "text", text: prompt }
    ]

    const { messageId } = await saveMessage(ctx, components.agent, {
      threadId, message: { role: "user", content }
    });

    await ctx.scheduler.runAfter(0, internal.llm.messages.text._internal, {
      promptMessageId: messageId,
      threadId,
    });
  },
});


export const _internal = internalAction({
  args: { threadId: v.string(), promptMessageId: v.string() },
  handler: async (ctx, { threadId, promptMessageId }) => {
    console.log("Basic Agent called");
    const { thread } = await basicAgent.continueThread(ctx, { threadId });
    await thread.streamText({ promptMessageId }, { saveStreamDeltas: { chunking: "line", throttleMs: 1000 } });
  },
});