import React from 'react'; import { EyeIcon, FingerprintIcon, MessageSquareIcon, PenLineIcon, SearchIcon, TagIcon, } from 'lucide-react'; import { FacebookLogo, GoogleLogo, InstagramLogo, LinkedInLogo, RedditLogo, TikTokLogo, YouTubeLogo, } from '../../icons/platform-logos'; import { cn } from '../cn'; /** A brand mark, drawn at the size the badge gives it. */ type PlatformLogo = (props: { size?: number }) => React.ReactElement; /** One thing Recomaze makes, and the request that starts it. */ interface Capability { key: string; label: string; /** The lucide mark, for anything that is not a platform. */ icon?: typeof EyeIcon; /** The platform's own mark, for anything that is. */ logo?: PlatformLogo; /** Colour that marks this capability wherever it appears. */ color?: string; /** Tint behind the icon, at the same hue. */ tint?: string; /** What asking for it sends to the copilot. */ prompt: string; } /** * What Recomaze can make, as one row. * * Each badge names a thing that comes out the other end - a LinkedIn post, an * article, a rewritten description - rather than the section of the plugin it * belongs to. "Content" and "Catalog" are names for places on a menu, and a * merchant who does not already know what lives in them learns nothing from * reading them; "LinkedIn post" is a thing they can picture wanting. */ const CAPABILITIES: readonly Capability[] = [ { key: 'blog_article', label: 'Blog article', icon: PenLineIcon, color: 'text-brand', tint: 'bg-brand/10', prompt: 'Write a blog article that goes after a prompt I am losing right now, and say which prompt it targets.', }, { key: 'page_seo', label: 'Page SEO', icon: SearchIcon, color: 'text-sky-600', tint: 'bg-sky-400/15', prompt: 'Which pages of my site have the weakest SEO right now, and fix the worst one for me.', }, { key: 'product_copy', label: 'Product copy', icon: TagIcon, color: 'text-amber-700', tint: 'bg-amber-400/20', prompt: 'Which product descriptions are holding my catalog back, and rewrite the worst one for me. If I have no catalog, say so instead of writing one.', }, { key: 'linkedin_post', label: 'LinkedIn post', logo: LinkedInLogo, prompt: 'Write me a LinkedIn post for my store. Pick the angle from what I actually sell, and tell me why that angle.', }, { key: 'facebook_post', label: 'Facebook post', logo: FacebookLogo, prompt: 'Write me a Facebook post for the people who follow my page. Pick one real thing from what I sell or do, and tell me why that one.', }, { key: 'instagram_post', label: 'Instagram post', logo: InstagramLogo, prompt: 'Write me an Instagram caption with the hashtags that fit my category. Pick what to feature from what I actually sell or write about, and say why that one.', }, { key: 'tiktok_video', label: 'TikTok video', logo: TikTokLogo, prompt: 'Write me a TikTok video idea I can film on my phone in one take: the hook, the shots, the on-screen text, what I say, the caption and the hashtags. Pick the subject from what I actually sell or do, and say why that one.', }, { key: 'video_script', label: 'Video script', logo: YouTubeLogo, prompt: 'Write me a YouTube script about one thing I actually know, that I can film on my phone without an editor. Pick the subject from what I sell.', }, { key: 'business_profile', label: 'Business Profile', logo: GoogleLogo, prompt: 'Write me a Google Business Profile update. Pick one real thing from what I sell or do and say why that one; if I have no address on file, write it for the area or market I serve.', }, { key: 'reddit_answer', label: 'Reddit answer', logo: RedditLogo, prompt: 'Find a question people in my category actually ask, and write a Reddit answer that earns the mention honestly.', }, { key: 'my_visibility', label: 'My visibility', icon: EyeIcon, color: 'text-sky-600', tint: 'bg-sky-400/15', prompt: 'How is my AI visibility doing right now, and what is the one thing to fix first?', }, { key: 'my_chatbot', label: 'My chatbot', icon: MessageSquareIcon, color: 'text-emerald-600', tint: 'bg-emerald-400/15', prompt: 'How is my storefront chatbot performing, and what should I change about it?', }, { key: 'company_id', label: 'Company ID', icon: FingerprintIcon, color: 'text-teal-600', tint: 'bg-teal-400/15', prompt: 'Is my Company ID complete, and what is still unanswered in it?', }, ]; /** * The capability row: what Recomaze can make, as tappable badges. It sits * under the questions on HQ, because the answer to "what can I even ask you" * has to be visible before the merchant types anything. * * @param props - Component props. * @param props.onPick - Start a turn about one. * @param props.isBusy - A turn is already running. * @return The row. */ export function CapabilityBadges({ onPick, isBusy = false, }: { onPick: (prompt: string) => void; isBusy?: boolean; }): React.ReactElement { return (
{CAPABILITIES.map((capability: Capability) => { const Icon = capability.icon; const Logo = capability.logo; // A brand mark carries its own colour, so it sits on a neutral chip // rather than under a hue we picked for it. const tint: string = Logo ? 'bg-surface-hover' : (capability.tint ?? ''); return ( ); })}
); }