86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T4b09,[V0_FILE]typescriptreact:file="contact-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Contact { id: string name: string avatar: string phone: string email: string address: string } const contacts: Contact[] = [ { id: "1", name: "Alice Johnson", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 123-4567", email: "alice@example.com", address: "123 Main St, Anytown, USA", }, { id: "2", name: "Bob Smith", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 234-5678", email: "bob@example.com", address: "456 Elm St, Somewhere, USA", }, { id: "3", name: "Charlie Brown", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 345-6789", email: "charlie@example.com", address: "789 Oak St, Nowhere, USA", }, { id: "4", name: "Diana Prince", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 456-7890", email: "diana@example.com", address: "101 Pine St, Everywhere, USA", }, { id: "5", name: "Ethan Hunt", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 567-8901", email: "ethan@example.com", address: "202 Maple St, Anywhere, USA", }, { id: "6", name: "Fiona Apple", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 678-9012", email: "fiona@example.com", address: "303 Cedar St, Someplace, USA", }, { id: "7", name: "George Michael", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 789-0123", email: "george@example.com", address: "404 Birch St, Elsewhere, USA", }, { id: "8", name: "Hannah Montana", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 890-1234", email: "hannah@example.com", address: "505 Walnut St, Overthere, USA", }, ] export default function ContactPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedContact, setSelectedContact] = useState(null) const filteredContacts = contacts.filter((contact) => contact.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectContact = (contact: Contact) => { setSelectedContact(contact) } const closeDetails = () => { setSelectedContact(null) } return (

setSearchTerm(e.target.value)} />

{selectedContact ? (

{selectedContact.name}

Phone: {selectedContact.phone}
Email: {selectedContact.email}
Address: {selectedContact.address}

) : ( filteredContacts.map((contact) => ( selectContact(contact)} >

{contact.name}

{contact.phone}

)) )}

) } [V0_FILE]typescriptreact:file="ai-persona-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X, MessageCircle, Zap, ChevronRight, Send } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Message { id: string content: string sender: "user" | "ai" timestamp: string } interface Conversation { id: string title: string summary: string messages: Message[] } interface AIPersona { id: string name: string avatar: string summary: string contextLength: number price: number totalConversations: number tokensConsumed: number conversations: Conversation[] } const aiPersonas: AIPersona[] = [ { id: "1", name: "Alice AI", avatar: "/placeholder.svg?height=100&width=100", summary: "Friendly AI assistant specializing in creative writing", contextLength: 2048, price: 0.02, totalConversations: 1500, tokensConsumed: 750000, conversations: [ { id: "conv1", title: "Brainstorming for Short Story", summary: "Discussed potential genres and plot ideas for a short story.", messages: [ { id: "m1", content: "Hello! How can I help with your writing today?", sender: "ai", timestamp: "2023-05-10 14:30", }, { id: "m2", content: "I need help brainstorming ideas for a short story.", sender: "user", timestamp: "2023-05-10 14:31", }, { id: "m3", content: "Great! Let's start by considering a few genres. Are you interested in science fiction, fantasy, mystery, or something else?", sender: "ai", timestamp: "2023-05-10 14:32", }, ], }, { id: "conv2", title: "Character Development Workshop", summary: "Worked on developing complex characters for a novel.", messages: [ { id: "m1", content: "I'm struggling with character development for my novel. Can you help?", sender: "user", timestamp: "2023-05-11 10:00", }, { id: "m2", content: "Character development is crucial for a compelling novel. Let's start by discussing your main character. What's their name and basic background?", sender: "ai", timestamp: "2023-05-11 10:01", }, ], }, ], }, { id: "2", name: "Bob Bot", avatar: "/placeholder.svg?height=100&width=100", summary: "Technical AI assistant for programming help", contextLength: 4096, price: 0.05, totalConversations: 2000, tokensConsumed: 1200000, conversations: [ { id: "conv1", title: "Python Debugging Session", summary: "Helped debug a Python script with a focus on error handling.", messages: [ { id: "m1", content: "Hello! What programming language are you working with today?", sender: "ai", timestamp: "2023-05-11 09:15", }, { id: "m2", content: "I'm having trouble with a Python script. Can you help?", sender: "user", timestamp: "2023-05-11 09:16", }, { id: "m3", content: "I'd be happy to help with your Python script. Can you describe the issue you're facing or share the relevant part of your code?", sender: "ai", timestamp: "2023-05-11 09:17", }, ], }, ], }, ] export default function AIPersonaPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedPersona, setSelectedPersona] = useState(null) const [selectedConversation, setSelectedConversation] = useState(null) const [newMessage, setNewMessage] = useState("") const filteredPersonas = aiPersonas.filter((persona) => persona.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectPersona = (persona: AIPersona) => { setSelectedPersona(persona) setSelectedConversation(null) } const selectConversation = (conversation: Conversation) => { setSelectedConversation(conversation) } const closeDetails = () => { setSelectedPersona(null) setSelectedConversation(null) } const sendMessage = () => { if (newMessage.trim() && selectedConversation) { const updatedConversation = { ...selectedConversation, messages: [ ...selectedConversation.messages, { id: `m${selectedConversation.messages.length + 1}`, content: newMessage, sender: "user" as const, timestamp: new Date().toISOString(), }, ], } setSelectedConversation(updatedConversation) setNewMessage("") } } return (

setSearchTerm(e.target.value)} />

{selectedPersona ? (

{selectedPersona.name}

{selectedConversation ? (

{selectedConversation.messages.map((message) => (

{message.content}

{message.timestamp}

))}

setNewMessage(e.target.value)} onKeyPress={(e) => e.key === "Enter" && sendMessage()} />

) : (

{selectedPersona.name}

{selectedPersona.summary}

Context Length

{selectedPersona.contextLength}

Price per 1K tokens

${selectedPersona.price.toFixed(3)}

Total Conversations

{selectedPersona.totalConversations.toLocaleString()}

Tokens Consumed

{selectedPersona.tokensConsumed.toLocaleString()}

Past Conversations

{selectedPersona.conversations.map((conv) => (

selectConversation(conv)} >

{conv.title}

{conv.summary}

))}

)} ) : ( filteredPersonas.map((persona) => ( selectPersona(persona)} >

{persona.name}

{persona.summary}

{persona.totalConversations} {(persona.tokensConsumed / 1000).toFixed(1)}K

)) )}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import React from "react" interface InputProps extends React.InputHTMLAttributes {} export const Input = React.forwardRef( ({ className, type, placeholder, ...props }, ref) => { return }, ) Input.displayName = "Input" 7c:["$","$L86",null,{"chatId":"IDNopNuKXlo","children":["$","$L87",null,{"data":{"@\"active-block\",\"IDNopNuKXlo\",":{"id":"TIkxSJd6VqM","messageId":"y2E1RFxIZWYMYgA8dg71IBz5q5B7NMZ9","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ios-contact-picker","type":"code-project","project":"ios-contact-picker"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"IDNopNuKXlo\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This