Chat IA

"use client";

import { AIChat, type AIChatProps } from "./blocks/ai-chat";

// Supply controlled state and request callbacks from your application.
export function ChatPanel(props: AIChatProps) {
  return <AIChat {...props} />;
}

"use client";

import * as React from "react";
import {
  AIChat,
  type AgentDefinitionDraft,
  type AgentDefinitionState,
  type ChatMessage,
} from "./blocks/ai-chat";

const sampleRequest = "Define a product review assistant.";

// Local definition creation only. No provider, storage or agent runtime.
export function AgentChat({
  confirm = async (snapshot) => snapshot,
}: {
  confirm?: (snapshot: AgentDefinitionDraft) => Promise<AgentDefinitionDraft>;
}) {
  const [text, setText] = React.useState("");
  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
  const [agent, setAgent] = React.useState<AgentDefinitionState>();
  const generation = React.useRef(0);
  const sequence = React.useRef(0);
  const pending = React.useRef(false);
  React.useEffect(
    () => () => {
      generation.current++;
    },
    [],
  );

  return (
    <AIChat
      messages={messages}
      draft={text}
      status="idle"
      onDraftChange={setText}
      onCopy={(message) => navigator.clipboard.writeText(message.text)}
      suggestions={[
        {
          id: "sample",
          label: "Define an agent (sample)",
          prompt: sampleRequest,
        },
      ]}
      onSubmit={(prompt) => {
        const id = `request-${++sequence.current}`;
        setMessages((current) => [
          ...current,
          { id, role: "user", text: prompt },
          {
            id: `${id}-reply`,
            role: "assistant",
            text:
              prompt.trim() === sampleRequest
                ? "Simulated draft from the exact sample request. Review and confirm below."
                : "This example recognizes only the exact sample request. It does not interpret arbitrary text.",
          },
        ]);
        setText("");
        if (prompt.trim() !== sampleRequest) return;
        generation.current++;
        pending.current = false;
        setAgent({
          status: "draft",
          draft: {
            id,
            revision: 0,
            name: "Product reviewer",
            purpose: "Review a supplied product interface.",
            instructions:
              "Check clarity, keyboard access and error recovery. Ask before expanding scope.",
          },
        });
      }}
      agentDefinition={
        agent
          ? {
              ...agent,
              onChange: (fields) => {
                generation.current++;
                setAgent((current) =>
                  current
                    ? {
                        status: "draft",
                        draft: {
                          ...current.draft,
                          ...fields,
                          revision: current.draft.revision + 1,
                        },
                      }
                    : current,
                );
              },
              onCancel: ({ id, revision }) => {
                generation.current++;
                pending.current = false;
                setAgent((current) =>
                  current?.draft.id === id &&
                  current.draft.revision === revision
                    ? { status: "cancelled", draft: current.draft }
                    : current,
                );
              },
              onConfirm: async (snapshot) => {
                if (pending.current) return;
                pending.current = true;
                const token = ++generation.current;
                setAgent({ status: "confirming", draft: snapshot });
                try {
                  const confirmed = await confirm(snapshot);
                  if (token !== generation.current) return;
                  // This contract confirms the reviewed snapshot, never changed server output.
                  // If validation changes fields, return a new draft for another review instead.
                  setAgent((current) =>
                    current?.status === "confirming" &&
                    current.draft.id === snapshot.id &&
                    current.draft.revision === snapshot.revision
                      ? { status: "created", draft: current.draft, confirmed }
                      : current,
                  );
                } catch {
                  if (token === generation.current)
                    setAgent({
                      status: "error",
                      draft: snapshot,
                      errorMessage:
                        "Confirmation failed. Your edits are preserved; retry when ready.",
                    });
                } finally {
                  if (token === generation.current) pending.current = false;
                }
              },
            }
          : undefined
      }
    />
  );
}

{
  "schemaVersion": 1,
  "kind": "pycolors-agent-definition",
  "name": "Product reviewer",
  "purpose": "Review a supplied product interface.",
  "instructions": "Check clarity and keyboard access."
}

"use client";

import * as React from "react";
import { Button } from "@pycolors/ui";
import type {
  ChatWorkControl,
  ChatWorkIdentity,
  ChatWorkState,
  ChatWorkStep,
} from "./blocks/ai-chat";

export const workSamplePrompt = "Show a sample launch review task plan.";
const sampleResult =
  "Sample checklist (fictional):\n- Make the primary action clear.\n- Verify keyboard access.\n- Explain how to recover from an error.";
const steps = (): ChatWorkStep[] => [
  {
    id: "brief",
    label: "Review the supplied brief",
    status: "pending",
    detail:
      "Example activity summary only. This demo does not read a real project or inspect a file.",
  },
  {
    id: "gaps",
    label: "Identify usability gaps",
    status: "pending",
    detail:
      "Fictional checks: clear labels, keyboard access and error recovery.",
  },
  {
    id: "checklist",
    label: "Prepare the review checklist",
    status: "pending",
    detail:
      "The sample text is already present locally. No model generates it.",
  },
];
type Transition =
  | "request-approval"
  | "approve"
  | "reject"
  | "cancel"
  | "confirm-cancel"
  | "retry"
  | "advance"
  | "complete"
  | "fail"
  | "unknown";

/** Demo consumer only. Every transition requires an explicit user action. */
export function useWorkSimulation() {
  const [state, setState] = React.useState<ChatWorkState>();
  const current = React.useRef<ChatWorkState | undefined>(undefined);
  const sequence = React.useRef(0);
  const mounted = React.useRef(true);
  React.useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
      current.current = undefined;
    };
  }, []);
  function update(next: ChatWorkState | undefined) {
    if (!mounted.current) return;
    current.current = next;
    setState(next);
  }
  function change(
    identity: ChatWorkIdentity | undefined,
    transition: Transition,
  ) {
    const value = current.current;
    if (
      !mounted.current ||
      !value ||
      !identity ||
      value.id !== identity.id ||
      value.attempt !== identity.attempt ||
      value.revision !== identity.revision
    )
      return;
    if (value.pendingAction && transition !== "confirm-cancel") return;
    const next = { ...value, revision: value.revision + 1 };
    switch (transition) {
      case "request-approval":
        if (value.status === "planned")
          update({ ...next, status: "waiting-for-approval" });
        break;
      case "approve":
        if (value.status === "waiting-for-approval")
          update({
            ...next,
            status: "running",
            steps: value.steps.map((step, index) => ({
              ...step,
              status: index === 0 ? "running" : "pending",
            })),
          });
        break;
      case "reject":
        if (value.status === "waiting-for-approval")
          update({
            ...next,
            status: "cancelled",
            steps: value.steps.map((step) => ({
              ...step,
              status: "cancelled",
            })),
          });
        break;
      case "cancel":
        if (
          ["planned", "running", "waiting-for-approval", "unknown"].includes(
            value.status,
          )
        )
          update({ ...next, pendingAction: "cancel" });
        break;
      case "confirm-cancel":
        if (value.pendingAction === "cancel")
          update({
            ...next,
            pendingAction: undefined,
            status: "cancelled",
            steps: value.steps.map((step) => ({
              ...step,
              status: step.status === "succeeded" ? "succeeded" : "cancelled",
            })),
          });
        break;
      case "retry":
        if (["failed", "cancelled", "unknown"].includes(value.status))
          update({
            ...next,
            attempt: value.attempt + 1,
            revision: 0,
            status: "planned",
            steps: steps(),
            result: undefined,
            errorMessage: undefined,
          });
        break;
      case "advance": {
        const active = value.steps.findIndex(
          (step) => step.status === "running",
        );
        if (value.status !== "running" || active === -1) break;
        update({
          ...next,
          result: {
            text: "Sample finding (fictional): verify that the primary action has a clear label.",
          },
          steps: value.steps.map((step, index) => ({
            ...step,
            status:
              index === active
                ? "succeeded"
                : index === active + 1
                  ? "running"
                  : step.status,
          })),
        });
        break;
      }
      case "complete":
        if (
          value.status === "running" &&
          value.steps.length > 0 &&
          value.steps.every((step) => step.status === "succeeded")
        )
          update({
            ...next,
            status: "succeeded",
            result: { text: sampleResult },
          });
        break;
      case "fail":
        if (value.status === "running")
          update({
            ...next,
            status: "failed",
            errorMessage:
              "Simulated failure. The supplied partial result is kept; you can retry with a new attempt.",
            steps: value.steps.map((step) => ({
              ...step,
              status: step.status === "running" ? "failed" : step.status,
            })),
          });
        break;
      case "unknown":
        if (
          ["planned", "running", "waiting-for-approval"].includes(value.status)
        )
          update({ ...next, status: "unknown" });
        break;
    }
  }
  const work: ChatWorkControl | undefined = state
    ? {
        ...state,
        onApprove: (identity) => change(identity, "approve"),
        onReject: (identity) => change(identity, "reject"),
        onCancel: (identity) => change(identity, "cancel"),
        onRetry: (identity) => change(identity, "retry"),
      }
    : undefined;
  return {
    work,
    start: () =>
      update({
        id: `sample-work-${++sequence.current}`,
        attempt: 1,
        revision: 0,
        title: "Review a launch plan",
        description:
          "Work simulation. Fictional steps and results; no background task or model is running.",
        status: "planned",
        steps: steps(),
      }),
    reset: () => update(undefined),
    requestApproval: () => change(state, "request-approval"),
    advance: () => change(state, "advance"),
    complete: () => change(state, "complete"),
    fail: () => change(state, "fail"),
    unknown: () => change(state, "unknown"),
    confirmCancellation: () => change(state, "confirm-cancel"),
  };
}

export function WorkSimulationControls({
  simulation,
  translate = (value: string) => value,
}: {
  simulation: ReturnType<typeof useWorkSimulation>;
  translate?: (value: string) => string;
}) {
  const work = simulation.work;
  if (!work) return null;
  const blocked = Boolean(work.pendingAction);
  return (
    <details className="rounded-lg border border-border px-4 py-3">
      <summary className="cursor-pointer text-sm font-medium">
        {translate("Work simulation controls")}
      </summary>
      <p className="mt-3 text-xs leading-5 text-muted-foreground">
        {translate(
          "These buttons supply fictional states manually. They do not execute work, call a model or write a file.",
        )}
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={blocked || work.status !== "planned"}
          onClick={simulation.requestApproval}
        >
          {translate("Simulate approval request")}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={
            blocked ||
            work.status !== "running" ||
            !work.steps.some((step) => step.status === "running")
          }
          onClick={simulation.advance}
        >
          {translate("Advance one step")}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={
            blocked ||
            work.status !== "running" ||
            !work.steps.every((step) => step.status === "succeeded")
          }
          onClick={simulation.complete}
        >
          {translate("Supply sample result")}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={blocked || work.status !== "running"}
          onClick={simulation.fail}
        >
          {translate("Simulate failure")}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={
            blocked ||
            !["planned", "running", "waiting-for-approval"].includes(
              work.status,
            )
          }
          onClick={simulation.unknown}
        >
          {translate("Simulate unknown status")}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="h-auto min-h-11 max-w-full whitespace-normal py-2 [overflow-wrap:anywhere]"
          disabled={work.pendingAction !== "cancel"}
          onClick={simulation.confirmCancellation}
        >
          {translate("Confirm simulated cancellation")}
        </Button>
      </div>
    </details>
  );
}

"use client";

import * as React from "react";
import { Button } from "@pycolors/ui";
import { AIChat, type ChatMessage } from "./blocks/ai-chat";
import {
  useWorkSimulation,
  WorkSimulationControls,
  workSamplePrompt,
} from "./work-simulation";

/** Local simulation only. Replace the consumer, not the copied presentation. */
export function WorkChat() {
  const simulation = useWorkSimulation();
  const [draft, setDraft] = React.useState("");
  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
  const sequence = React.useRef(0);
  return (
    <div className="space-y-4">
      <p>Work simulation · fictional states and results, supplied manually.</p>
      <Button
        type="button"
        variant="outline"
        onClick={() => {
          simulation.reset();
          setDraft("");
          setMessages([]);
        }}
      >
        Reset simulation
      </Button>
      <AIChat
        messages={messages}
        draft={draft}
        status="idle"
        onDraftChange={setDraft}
        onCopy={(message) => navigator.clipboard.writeText(message.text)}
        work={simulation.work}
        suggestions={[
          {
            id: "work",
            label: "Review a task plan (sample)",
            prompt: workSamplePrompt,
          },
        ]}
        onSubmit={(text) => {
          const sample = text.trim() === workSamplePrompt;
          if (sample) simulation.start();
          const id = ++sequence.current;
          setMessages((previous) => [
            ...previous,
            { id: `user-${id}`, role: "user", text },
            {
              id: `assistant-${id}`,
              role: "assistant",
              text: sample
                ? "Sample plan supplied. Open Work simulation controls to review the states. No task has run."
                : "This local example only recognizes the exact sample prompt; it does not call a model.",
            },
          ]);
          setDraft("");
        }}
      />
      <WorkSimulationControls simulation={simulation} />
    </div>
  );
}

"use client";

import * as React from "react";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type ChatTransport, type UIMessage } from "ai";
import { AIChat, type ChatMessage, type ChatStatus } from "./blocks/ai-chat";

// Keep this adapter in your application, outside the copied Block.
export function ConnectedChat({
  transport,
}: {
  transport?: ChatTransport<UIMessage>;
}) {
  const [defaultTransport] = React.useState(
    () => new DefaultChatTransport({ api: "/api/chat" }),
  );
  const chat = useChat({ transport: transport ?? defaultTransport });
  const [draft, setDraft] = React.useState("");
  const [pending, setPending] = React.useState(false);
  const [stopped, setStopped] = React.useState(false);
  const [localError, setLocalError] = React.useState(false);
  const [previous, setPrevious] = React.useState<ChatMessage[] | null>(null);
  const inFlight = React.useRef(false);
  const mounted = React.useRef(false);
  React.useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
      void chat.stop();
    };
  }, [chat.stop]);

  const messages: ChatMessage[] = chat.messages.flatMap((message) => {
    if (message.role !== "user" && message.role !== "assistant") return [];
    const text = message.parts
      .filter((part) => part.type === "text")
      .map((part) => part.text)
      .join("");
    const unsupported = message.parts.some(
      (part) => part.type !== "text" && part.type !== "step-start",
    );
    return [
      {
        id: message.id,
        role: message.role,
        text: unsupported
          ? `${text}\n[Unsupported response content. This example supports text only.]`
          : text,
      },
    ];
  });
  const unsupported = chat.messages.some((message) =>
    message.parts.some(
      (part) => part.type !== "text" && part.type !== "step-start",
    ),
  );
  const busy =
    pending || chat.status === "submitted" || chat.status === "streaming";
  const status: ChatStatus =
    chat.status === "streaming"
      ? "streaming"
      : busy
        ? "submitting"
        : unsupported || localError || chat.status === "error"
          ? "error"
          : stopped
            ? "stopped"
            : "idle";
  const latest = messages.at(-1);
  // regenerate removes the old assistant message immediately. Preserve it until
  // its replacement has content; also retain it if retry fails before a chunk.
  const visible =
    previous && !(latest?.role === "assistant" && latest.text)
      ? previous
      : messages;

  async function request(retry: boolean, text: string) {
    if (inFlight.current || (!retry && !text.trim())) return;
    inFlight.current = true;
    setPending(true);
    setStopped(false);
    setLocalError(false);
    setPrevious(retry ? visible : null);
    chat.clearError();
    try {
      if (retry) await chat.regenerate();
      else await chat.sendMessage({ text });
    } catch {
      if (mounted.current) setLocalError(true);
    } finally {
      inFlight.current = false;
      if (mounted.current) setPending(false);
    }
  }

  return (
    <AIChat
      messages={visible}
      draft={draft}
      onDraftChange={setDraft}
      status={status}
      onSubmit={(text) => {
        void request(false, text);
      }}
      onRetry={
        chat.messages.some((message) => message.role === "user")
          ? () => {
              void request(true, "");
            }
          : undefined
      }
      onStop={() => {
        void chat
          .stop()
          .then(() => {
            if (mounted.current) setStopped(true);
          })
          .catch(() => {
            if (mounted.current) setLocalError(true);
          });
      }}
      onCopy={(message) => navigator.clipboard.writeText(message.text)}
      errorMessage={
        unsupported
          ? "The endpoint returned unsupported content. Configure a text-only response."
          : "The response could not be completed. Your text is preserved; you can retry."
      }
    />
  );
}