AI Suggested Actions

"use client";

import * as React from "react";

import { AiSuggestedActions } from "@/components/ui/suggested-actions";

const suggestions = [
  {
    label: "Explain this code",
    prompt: "Can you explain how this code works?",
  },
  { label: "Fix the bug", prompt: "There's a bug in my code. Can you help?" },
  { label: "Write tests", prompt: "Can you write unit tests for this?" },
  { label: "Optimize performance", prompt: "How can I optimize this code?" },
];

export default function Demo() {
  const [selected, setSelected] = React.useState<string | null>(null);

  return (
    <div className="mx-auto w-full max-w-md rounded-xl border bg-card p-5 text-card-foreground shadow-sm">
      <div className="mb-4 space-y-1">
        <h3 className="text-sm font-medium">How can I help you today?</h3>
        <p className="text-xs text-muted-foreground">
          Pick a suggestion to get started.
        </p>
      </div>

      <AiSuggestedActions suggestions={suggestions} onSelect={setSelected} />

      <p className="mt-4 min-h-5 text-xs text-muted-foreground">
        {selected ? (
          <>
            Sending: <span className="text-foreground">{selected}</span>
          </>
        ) : (
          "No prompt selected yet."
        )}
      </p>
    </div>
  );
}