Agent Chat Input

"use client";

import { AgentChatCreative } from "@/components/premium/agent-chat-input/agent-chat-creative";
import {
  AgentComposerAction,
  AgentComposerAttach,
  AgentComposerAttachments,
  AgentComposerError,
  AgentComposerInput,
  AgentComposerModel,
  AgentComposerOptions,
  AgentComposerToolbar,
} from "@/components/premium/agent-chat-input/composition";

export function AgentChatCreativePreview() {
  return (
    <div className="flex w-full justify-center p-4 sm:p-8">
      <AgentChatCreative
        onSubmit={async () => {
          await new Promise((resolve) => setTimeout(resolve, 600));
        }}
      >
        <AgentComposerInput />
        <AgentComposerToolbar className="p-2">
          <AgentComposerAttach />
          <AgentComposerOptions />
          <div className="ml-auto flex items-center gap-2">
            <AgentComposerModel />
            <AgentComposerAction />
          </div>
        </AgentComposerToolbar>
        <AgentComposerAttachments />
        <AgentComposerError />
      </AgentChatCreative>
    </div>
  );
}

"use client";

import { useEffect, useRef, useState } from "react";
import { AgentChatPill } from "@/components/premium/agent-chat-input/agent-chat-pill";
import {
  AgentComposerAttachments,
  AgentComposerInput,
  AgentComposerToolbar,
} from "@/components/premium/agent-chat-input/composition";
import type { AgentChatInputStatus } from "@/components/premium/agent-chat-input/types";

export function AgentChatPillPreview() {
  const [status, setStatus] = useState<AgentChatInputStatus>("ready");
  const [message, setMessage] = useState("");
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );

  return (
    <div className="relative flex h-80 w-full max-w-2xl items-end px-4 pb-12">
      <AgentChatPill
        slots={{
          input: <AgentComposerInput />,
          toolbar: <AgentComposerToolbar />,
          attachments: <AgentComposerAttachments />,
        }}
        status={status}
        onPluginSelect={(plugin) =>
          setMessage(`${plugin} hook — connect your plugin integration.`)
        }
        onSubmit={({ text, files }) => {
          setStatus("streaming");
          setMessage(
            files.length
              ? `Demo: message with ${files.length} attachment${files.length === 1 ? "" : "s"} received.`
              : `Demo: “${text}” received.`,
          );
          timer.current = setTimeout(() => setStatus("ready"), 2400);
        }}
        onStop={() => {
          if (timer.current) clearTimeout(timer.current);
          setStatus("ready");
          setMessage("Demo response stopped.");
        }}
        onDictationClick={() =>
          setMessage(
            "Dictation hook — connect your speech-to-text service. This preview does not record audio.",
          )
        }
        onVoiceClick={() =>
          setMessage(
            "Voice chat hook — connect your voice service. This preview does not record audio.",
          )
        }
      />
      <output className="absolute inset-x-6 top-full -mt-9 text-center text-xs text-muted-foreground">
        {message}
      </output>
    </div>
  );
}

"use client";

import { Code2, FileSearch, GitBranch, MessageSquareText } from "lucide-react";
import { useState } from "react";
import {
  AgentChatInput,
  type AgentChatInputStatus,
  type AgentChatQueuedMessage,
  type AgentChatSubmitPayload,
} from "@/components/premium/agent-chat-input";
import {
  AgentComposerAttachments,
  AgentComposerInput,
  AgentComposerToolbar,
} from "@/components/premium/agent-chat-input/composition";

const skills = [
  {
    id: "code-review",
    label: "Code review",
    description: "Review unstaged changes or compare against a branch",
    icon: <Code2 className="size-4" />,
  },
  {
    id: "context",
    label: "Context scan",
    description: "Read files, docs, and recent project changes",
    icon: <FileSearch className="size-4" />,
  },
  {
    id: "fork",
    label: "Fork plan",
    description: "Create a branch-safe implementation plan",
    icon: <GitBranch className="size-4" />,
  },
  {
    id: "feedback",
    label: "Feedback",
    description: "Turn notes into targeted code changes",
    icon: <MessageSquareText className="size-4" />,
  },
];

const models = [
  {
    id: "gpt-5.5",
    label: "GPT-5.5",
    description: "Best for deep agent work",
  },
  {
    id: "gpt-5.5-mini",
    label: "GPT-5.5 Mini",
    description: "Fast everyday edits",
  },
  {
    id: "claude-sonnet",
    label: "Claude Sonnet",
    description: "Long-context review",
  },
];

const queuedMessages: AgentChatQueuedMessage[] = [
  {
    id: "research",
    text: "research",
  },
];

export function AgentChatInputPreview() {
  const [input, setInput] = useState("");
  const [status, setStatus] = useState<AgentChatInputStatus>("ready");

  function submit(payload: AgentChatSubmitPayload) {
    console.info("Agent chat input submitted", payload);
    setStatus("submitted");

    window.setTimeout(() => {
      setStatus("streaming");
    }, 500);

    window.setTimeout(() => {
      setStatus("ready");
    }, 1800);
  }

  return (
    <div className="flex min-h-[18rem] w-full max-w-3xl flex-col justify-end px-4">
      <AgentChatInput
        slots={{
          input: <AgentComposerInput />,
          toolbar: <AgentComposerToolbar />,
          attachments: <AgentComposerAttachments />,
        }}
        value={input}
        onValueChange={setInput}
        status={status}
        onSubmit={submit}
        onStop={() => setStatus("ready")}
        models={models}
        skills={skills}
        defaultQueuedMessages={queuedMessages}
        onQueuedMessageSteer={() => {}}
        onQueuedMessageEdit={() => {}}
        placeholder="Ask for follow-up changes"
        className="max-w-full text-base [&_button]:text-sm"
        classNames={{
          textarea: "min-h-16 !text-base leading-6",
          toolbar: "[&_button]:text-base",
        }}
      />
    </div>
  );
}

"use client";

import { BookOpen, Telescope } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import {
  AgentChatCredits,
  type AgentChatInputStatus,
} from "@/components/premium/agent-chat-input";
import {
  AgentComposerAttachments,
  AgentComposerInput,
  AgentComposerToolbar,
} from "@/components/premium/agent-chat-input/composition";

const SOURCES = [
  { id: "research", label: "Research", icon: <Telescope /> },
  { id: "knowledge", label: "Knowledge", icon: <BookOpen /> },
];

export function AgentChatCreditsPreview() {
  const [status, setStatus] = useState<AgentChatInputStatus>("ready");
  const timers = useRef<number[]>([]);

  useEffect(
    () => () => {
      timers.current.forEach((timer) => {
        window.clearTimeout(timer);
      });
    },
    [],
  );

  function submit(message: string) {
    console.info("Credits composer submitted", message);
    timers.current.forEach((timer) => {
      window.clearTimeout(timer);
    });
    setStatus("streaming");
    timers.current = [window.setTimeout(() => setStatus("ready"), 2200)];
  }

  return (
    <div className="flex min-h-[38rem] w-full items-center justify-center px-4 pt-56 pb-14 sm:px-8">
      <AgentChatCredits
        slots={{
          input: <AgentComposerInput />,
          toolbar: <AgentComposerToolbar />,
          attachments: <AgentComposerAttachments />,
        }}
        status={status}
        onSubmit={submit}
        onStop={() => setStatus("ready")}
        onFilesSelected={() => {}}
        onVoiceClick={() => {}}
        defaultSearchEnabled
        sources={SOURCES}
        defaultSourceIds={["research", "knowledge"]}
        onUpgradeClick={() => {}}
        onDismissClick={() => {}}
      />
    </div>
  );
}