"use client";

import { experimental_useObject as useObject } from "@ai-sdk/react";
import {
  Task,
  TaskItem,
  TaskItemFile,
  TaskTrigger,
  TaskContent,
} from "@/components/ai-elements/task";
import { Button } from "@/components/ui/button";
import {
  SiReact,
  SiTypescript,
  SiJavascript,
  SiCss,
  SiHtml5,
  SiJson,
  SiMarkdown,
} from "@icons-pack/react-simple-icons";

const iconMap = {
  react: { component: SiReact, color: "#149ECA" },
  typescript: { component: SiTypescript, color: "#3178C6" },
  javascript: { component: SiJavascript, color: "#F7DF1E" },
  css: { component: SiCss, color: "#1572B6" },
  html: { component: SiHtml5, color: "#E34F26" },
  json: { component: SiJson, color: "#000000" },
  markdown: { component: SiMarkdown, color: "#000000" },
};

const TaskDemo = () => {
  const { object, submit, isLoading } = useObject({
    api: "/api/agent",
    schema: tasksSchema,
  });

  const renderTaskItem = (item: any, index: number) => {
    if (item?.type === "file" && item.file) {
      const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];
      if (iconInfo) {
        const IconComponent = iconInfo.component;
        return (
          <span className="inline-flex items-center gap-1" key={index}>
            {item.text}
            <TaskItemFile>
              <IconComponent color={item.file.color || iconInfo.color} className="size-4" />
              <span>{item.file.name}</span>
            </TaskItemFile>
          </span>
        );
      }
    }
    return item?.text || "";
  };

  return (
    <div className="max-w-4xl mx-auto p-6 rounded-lg border h-[600px]">
      <div className="flex gap-2 mb-6 flex-wrap">
        <Button onClick={() => submit({ prompt: "React component development" })} disabled={isLoading}>
          React Development
        </Button>
      </div>

      <div className="flex-1 overflow-auto space-y-4">
        {isLoading && !object && <div>Generating tasks...</div>}

        {object?.tasks?.map((task: any, taskIndex: number) => (
          <Task key={taskIndex} defaultOpen={taskIndex === 0}>
            <TaskTrigger title={task.title || "Loading..."} />
            <TaskContent>
              {task.items?.map((item: any, itemIndex: number) => (
                <TaskItem key={itemIndex}>
                  {renderTaskItem(item, itemIndex)}
                </TaskItem>
              ))}
            </TaskContent>
          </Task>
        ))}
      </div>
    </div>
  );
};

import { streamObject } from "ai";
import { z } from "zod";

export const taskItemSchema = z.object({
  type: z.enum(["text", "file"]),
  text: z.string(),
  file: z.object({
    name: z.string(),
    icon: z.string(),
    color: z.string().optional(),
  }).optional(),
});

export const taskSchema = z.object({
  title: z.string(),
  items: z.array(taskItemSchema),
  status: z.enum(["pending", "in_progress", "completed"]),
});

export const tasksSchema = z.object({
  tasks: z.array(taskSchema),
});

export const maxDuration = 30;

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = streamObject({
    model: "openai/gpt-4o",
    schema: tasksSchema,
    prompt: `You are an AI assistant that generates realistic development task workflows.`,
  });

  return result.toTextStreamResponse();
}

"use client";

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type ToolUIPart } from "ai";
import { useState } from "react";
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Confirmation,
  ConfirmationTitle,
  ConfirmationRequest,
  ConfirmationAccepted,
  ConfirmationRejected,
  ConfirmationActions,
  ConfirmationAction,
} from "@/components/ai-elements/confirmation";

type DeleteFileToolUIPart = ToolUIPart<{
  delete_file: {
    input: { filePath: string; confirm: boolean };
    output: { success: boolean; message: string };
  };
}>;

const Example = () => {
  const { messages, sendMessage, addToolApprovalResponse } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });

  const latestMessage = messages[messages.length - 1];
  const deleteTool = latestMessage?.parts?.find(
    (part) => part.type === "tool-delete_file"
  ) as DeleteFileToolUIPart | undefined;

  return (
    <div>
      <Button onClick={() => sendMessage({ text: "Delete the file" })}>
        Delete Example File
      </Button>

      {deleteTool?.approval && (
        <Confirmation approval={deleteTool.approval} state={deleteTool.state}>
          <ConfirmationRequest>
            This tool wants to delete: <code>{deleteTool.input?.filePath}</code>
          </ConfirmationRequest>
          <ConfirmationAccepted>
            <CheckIcon className="size-4" />
            <span>Approved</span>
          </ConfirmationAccepted>
          <ConfirmationRejected>
            <XIcon className="size-4" />
            <span>Rejected</span>
          </ConfirmationRejected>
          <ConfirmationActions>
            <ConfirmationAction
              variant="outline"
              onClick={() =>
                addToolApprovalResponse({
                  id: deleteTool.approval!.id,
                  approved: false,
                })
              }
            >
              Reject
            </ConfirmationAction>
            <ConfirmationAction
              onClick={() =>
                addToolApprovalResponse({
                  id: deleteTool.approval!.id,
                  approved: true,
                })
              }
            >
              Approve
            </ConfirmationAction>
          </ConfirmationActions>
        </Confirmation>
      )}
    </div>
  );
};