'use client' import type { AI } from '@/app/(chat)/actions' import { UserMessage } from '@/components/message' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Textarea } from '@/components/ui/textarea' import { generateId } from 'ai' import { useAIState, useActions, useUIState } from 'ai/rsc' import { useState } from 'react' interface PostGeneratorFormProps { id: string initialPostDetails?: string initialAudience?: string initialDrafts?: string } export function PostGeneratorForm({ initialDrafts, initialAudience, initialPostDetails, id }: PostGeneratorFormProps) { const [aiState] = useAIState() const [messages, setMessages] = useUIState() const { sendMessage } = useActions() const [postDetails, setPostDetails] = useState(initialPostDetails || '') const [audience, setAudience] = useState(initialAudience || '') const [drafts, setDrafts] = useState(initialDrafts || '1') const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() console.log('Form submitted', { postDetails, audience, drafts }) setMessages(currentMessages => [ ...currentMessages, { id: generateId(), role: 'human', display: (

Post Details:

{postDetails}

Audience:

{audience}

) } ]) const responseMessage = await sendMessage( postDetails, audience, parseInt(drafts), id ) setMessages(currentMessages => [...currentMessages, responseMessage]) } // const isButtonDisabled = // !!initialPostDetails?.length || !!initialAudience const isButtonDisabled: boolean = Boolean(initialPostDetails && initialPostDetails.length > 0) || Boolean(initialAudience && initialAudience.length > 0) return (

Post Details

setPostDetails(e.target.value)}
            required
            className="w-full px-3 py-2 text-primary border rounded-lg focus:outline-none focus:border-blue-500 transition-colors duration-300"
          />
        </div>

<div className="space-y-2">
          <Label htmlFor="audience" className="text-primary font-medium">
            Audience
          </Label>
          <Input
            id="audience"
            placeholder="Define your audience"
            value={audience}
            onChange={e => setAudience(e.target.value)}
            required
            className="w-full px-3 py-2 text-primary border rounded-lg focus:outline-none focus:border-blue-500 transition-colors duration-300"
          />
        </div>

<div className="space-y-2">
          <Label htmlFor="drafts" className="text-primary font-medium">
            Number of Drafts
          </Label>
          <Select value={drafts} onValueChange={setDrafts}>
            <SelectTrigger className="w-full px-3 py-2 text-primary border rounded-lg focus:outline-none focus:border-blue-500 transition-colors duration-300">
              <SelectValue placeholder="Select number of drafts" />
            </SelectTrigger>
            <SelectContent>
              {[1, 2, 3, 4, 5].map(num => (
                <SelectItem
                  key={num}
                  value={num.toString()}
                  className="text-primary"
                >
                  {num}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<Button type="submit" className="w-full" disabled={isButtonDisabled}>
          Generate Drafts
        </Button>
      </form>
    </div>
  )
}
</article></body></html>