bunx shadcn@latest add @elements/suggested-actions

import { AiSuggestedActions } from "@/components/elements/ai-elements/chat/ai-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", prompt: "How can I optimize this code?" },
];

export function ChatSuggestions() {
  const handleSelect = (prompt: string) => {
    console.log("Selected:", prompt);
  };

  return (
    <AiSuggestedActions
      suggestions={suggestions}
      onSelect={handleSelect}
    />
  );
}

interface Suggestion {
  label: string;   // Display text on the button
  prompt: string;  // Full prompt to send when clicked
}

import { useState } from "react";
import { AiSuggestedActions } from "@/components/elements/ai-elements/chat/ai-suggested-actions";
import { AiChatInput } from "@/components/elements/ai-elements/chat/ai-chat-input";

export function ChatWithSuggestions() {
  const [input, setInput] = useState("");

  return (
    <div className="space-y-4">
      <AiSuggestedActions
        suggestions={suggestions}
        onSelect={setInput}
      />
      <AiChatInput
        value={input}
        onChange={setInput}
        onSubmit={handleSubmit}
      />
    </div>
  );
}