spb/zyquo-cloud-web Public MIT

1/*2 *  SuggestionGrid.tsx3 *  Zyquo Cloud Web4 *5 *  Author: Simon-Pierre Boucher6 *  Mail: contact@spboucher.ai7 *8 *  Empty-conversation state: centered Zyquo mark, greeting, model chip, and9 *  the four suggestion cards (matches the native EmptyStateView).10 */1112import type { ReactNode } from 'react'13import ZyquoGlyph from './ZyquoGlyph'14import { IconCode, IconDoc, IconGlobe, IconLightbulb } from './icons'1516const SUGGESTIONS = [17  {18    icon: <IconLightbulb />,19    title: 'Explain something',20    prompt: 'Explain how transformer attention works, with a concrete example.',21  },22  {23    icon: <IconCode />,24    title: 'Review my code',25    prompt: 'Review this code for bugs and suggest improvements:\n\n',26  },27  {28    icon: <IconDoc />,29    title: 'Summarize a document',30    prompt: 'Summarize the key points of the following document:\n\n',31  },32  {33    icon: <IconGlobe />,34    title: 'Translate',35    prompt: 'Translate the following text to French, keeping the tone natural:\n\n',36  },37]3839export default function SuggestionGrid({40  onPick,41  modelChip,42}: {43  onPick: (prompt: string) => void44  modelChip?: ReactNode45}) {46  return (47    <div className="empty-state">48      <ZyquoGlyph size={72} />49      <div style={{ textAlign: 'center' }}>50        <h1 className="empty-title">Welcome to Zyquo Cloud</h1>51        <p className="empty-subtitle">Your keys, every cloud model, one beautiful chat.</p>52      </div>53      {modelChip}54      <div className="suggestion-grid">55        {SUGGESTIONS.map((suggestion) => (56          <button57            key={suggestion.title}58            className="suggestion-card"59            onClick={() => onPick(suggestion.prompt)}60          >61            <span className="glyph">{suggestion.icon}</span>62            {suggestion.title}63          </button>64        ))}65      </div>66    </div>67  )68}69