Feature Toggle

npx shadcn@latest add "https://haberui.com/h/feature-toggle.json"

import { useState } from "react";
import { FeatureToggle } from "@/components/haber-ui/feature-toggle";
import { Search, Sparkles } from "lucide-react";
 
export function AIChat() {
  const [webSearch, setWebSearch] = useState(false);
  const [deepResearch, setDeepResearch] = useState(false);
  const [message, setMessage] = useState("");
 
  const handleSubmit = (e) => {
    e.preventDefault();
 
    // Access the features in your submission handler
    console.log(
      `Sending message with features - Web Search: ${webSearch}, Deep Research: ${deepResearch}`
    );
    console.log(`Message: ${message}`);
 
    // Reset message
    setMessage("");
  };
 
  return (
    <div className="rounded-lg border p-4 bg-background">
      <div className="space-y-4">
        <div className="h-80 overflow-y-auto p-2 rounded border border-muted">
          {/* Chat messages would go here */}
          <div className="p-3 text-sm text-muted-foreground text-center">
            Start a new conversation
          </div>
        </div>
 
        <form onSubmit={handleSubmit}>
          <div className="flex gap-2 mb-2">
            <FeatureToggle
              active={webSearch}
              onActiveChange={setWebSearch}
              icon={<Search className="size-4" />}
              size="sm"
            >
              Web Search
            </FeatureToggle>
 
            <FeatureToggle
              active={deepResearch}
              onActiveChange={setDeepResearch}
              icon={<Sparkles className="size-4" />}
              colorScheme="purple"
              size="sm"
            >
              Deep Research
            </FeatureToggle>
          </div>
 
          <div className="flex gap-2">
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Type your message..."
              className="flex-1 rounded-md border px-3 py-2"
            />
            <button
              type="submit"
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
            >
              Send
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}