AI Conversation

"use client";

import { useEffect, useState } from "react";
import Component from "@/components/ui/ai-conversation";

const TURNS = [
  { from: "user", text: "Why does my dialog feel sluggish?" },
  {
    from: "assistant",
    text: "It animates for 600ms with an ease-in-out curve, so the first third barely moves.",
  },
  { from: "user", text: "What should I use instead?" },
  {
    from: "assistant",
    text: "0.25s with an ease-out curve. It will read as instant while still animating.",
  },
];

export default function DemoOne() {
  const [count, setCount] = useState(2);

  useEffect(() => {
    const id = setInterval(
      () => setCount((c) => (c >= TURNS.length ? 2 : c + 1)),
      1800
    );
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="h-[320px] w-full max-w-lg overflow-hidden rounded-2xl border bg-card shadow-sm">
        <Component contentKey={count}>
          <div className="space-y-3 p-5">
            {TURNS.slice(0, count).map((turn) => (
              <div
                className={
                  turn.from === "user"
                    ? "ml-auto max-w-[80%] rounded-2xl bg-muted px-4 py-2 text-foreground text-sm"
                    : "max-w-[80%] rounded-2xl border px-4 py-2 text-foreground text-sm"
                }
                key={turn.text}
              >
                {turn.text}
              </div>
            ))}
          </div>
        </Component>
      </div>
    </div>
  );
}