import {
  AiAssistantProvider,
  AiAssistantTrigger,
  AiAssistantChat,
  AiAssistantHeader,
  AiAssistantHeaderTitle,
  AiAssistantHeaderActions,
  AiAssistantMessages,
  AiAssistantEmptyState,
  AiAssistantMessageList,
  AiAssistantInput,
} from "@/components/ai-assistant";

export function AiAssistantDemo() {
  return (
    <AiAssistantProvider
      onMessageSent={(msg) => console.log("Sent:", msg)}
      onResponse={(response) => console.log("Response:", response)}
      onError={(error) => console.error("Error:", error)}
    >
      <div className="flex gap-4">
        <AiAssistantTrigger
          variant="secondary"
          size="lg"
          position="bottom-right"
        >
          Chat with AI
        </AiAssistantTrigger>
 
        <AiAssistantTrigger variant="outline" position="static" asChild>
          <button className="border-primary/50 hover:bg-primary/5 rounded-lg border-2 border-dashed px-4 py-2 text-sm font-medium transition-colors">
            Custom Button
          </button>
        </AiAssistantTrigger>
      </div>
 
      <AiAssistantChat position="bottom-center" variant="default" size="lg">
        <AiAssistantHeader>
          <AiAssistantHeaderTitle>🤖 AI Assistant</AiAssistantHeaderTitle>
          <AiAssistantHeaderActions />
        </AiAssistantHeader>
 
        <AiAssistantMessages>
          <AiAssistantEmptyState
            suggestions={[
              "What can you do?",
              "Tell me about this component",
              "How do I customize it?",
            ]}
          />
          <AiAssistantMessageList />
        </AiAssistantMessages>
 
        <AiAssistantInput placeholder="Ask me anything..." maxLength={1000} />
      </AiAssistantChat>
    </AiAssistantProvider>
  );
}

import { AiAssistant } from "@/components/ai-assistant";
 
export function App() {
  return (
    <AiAssistant
      title="My AI Assistant"
      placeholder="Ask me anything..."
      suggestions={[
        "What can you help with?",
        "Tell me a joke",
        "How does this work?",
      ]}
      maxInputLength={1000}
      onMessageSent={(msg) => console.log("Message sent:", msg)}
      onResponse={(response) => console.log("Response:", response)}
      onError={(error) => console.error("Error:", error)}
    />
  );
}