[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Chatbox", description: "A chat interface", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/chat.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Image, Link, FileText, Globe, Scissors, Send, Settings, MessageSquare, Star } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { SettingsDialog } from "./settings-dialog" interface Message { role: "user" | "assistant" content: string } interface Conversation { id: number title: string messages: Message[] } const mockConversations: Conversation[] = [ { id: 1, title: "GPT-mini", messages: [ { role: "user", content: "你好，GPT-mini！" }, { role: "assistant", content: "你好！我是 GPT-mini，有什么我可以帮助你的吗？" }, { role: "user", content: "请简单介绍一下你自己。" }, { role: "assistant", content: "我是一个基于人工智能技术开发的语言模型，被称为 GPT-mini。我的主要功能是与人类进行对话交流，回答问题，并提供各种信息和建议。虽然我的知识库很广泛，但我并不是全知全能的，我的回答基于我被训练的数据。我会尽力提供准确和有帮助的回答，但有时可能需要进一步澄清或更多上下文来更好地理解问题。如果你有任何问题，无论是关于科技、文化、历史还是其他话题，都可以随时问我！", }, ], }, { id: 2, title: "关于人工智能", messages: [ { role: "user", content: "什么是人工智能？" }, { role: "assistant", content: "人工智能是指由人制造出来的机器所表现出来的智能。" }, { role: "user", content: "有哪些常见的人工智能应用？" }, { role: "assistant", content: "常见的人工智能应用包括语音助手、图像识别、自动驾驶、推荐系统等。" }, ], }, { id: 3, title: "关于机器学习", messages: [ { role: "user", content: "机器学习是什么？" }, { role: "assistant", content: '机器学习是人工智能的一个分支，它使用统计技术让计算机系统能够"学习"。' }, { role: "user", content: "有哪些常见的机器学习算法？" }, { role: "assistant", content: "常见的机器学习算法包括线性回归、决策树、随机森林、支持向量机、神经网络等。" }, ], }, ] export function Chat() { const [conversations, setConversations] = useState(mockConversations) const [currentConversationId, setCurrentConversationId] = useState(1) const [input, setInput] = useState("") const [isLinkDialogOpen, setIsLinkDialogOpen] = useState(false) const [isSettingsOpen, setIsSettingsOpen] = useState(false) const [linkUrl, setLinkUrl] = useState("") const fileInputRef = useRef(null) const imageInputRef = useRef(null) const inputRef = useRef(null) const currentConversation = conversations.find((conv) => conv.id === currentConversationId) || conversations[0] const handleImageUpload = (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { console.log("Selected image:", files[0]) } } const handleFileUpload = (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { console.log("Selected file:", files[0]) } } const handleCut = () => { if (inputRef.current) { const start = inputRef.current.selectionStart const end = inputRef.current.selectionEnd if (start !== null && end !== null && start !== end) { navigator.clipboard.writeText(input.slice(start, end)) const newText = input.slice(0, start) + input.slice(end) setInput(newText) } } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (input.trim()) { const newMessage: Message = { role: "user", content: input.trim() } const updatedConversations = conversations.map((conv) => conv.id === currentConversationId ? { ...conv, messages: [...conv.messages, newMessage] } : conv, ) setConversations(updatedConversations) setInput("") setTimeout(() => { const aiResponse: Message = { role: "assistant", content: "这是一个模拟的 AI 回复。" } const updatedConversationsWithAI = updatedConversations.map((conv) => conv.id === currentConversationId ? { ...conv, messages: [...conv.messages, aiResponse] } : conv, ) setConversations(updatedConversationsWithAI) }, 1000) } } const handleLinkInsert = () => { if (linkUrl) { const newText = input + ` [链接](${linkUrl})` setInput(newText) setLinkUrl("") setIsLinkDialogOpen(false) } } const handleConversationChange = (id: number) => { setCurrentConversationId(id) } return (

{/* 左侧对话列表 */}

Chatbox

对话

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

{/* 右侧聊天界面 */}

{currentConversation.title}

{currentConversation.messages.map((message, index) => (

{message.role === "user" ? "U" : "A"}

{message.content}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Chat } from "@/components/chat" export default function Home() { return ( <> ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/settings-dialog.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Slider } from "@/components/ui/slider" const models = [ { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo" }, { id: "gpt-4", name: "GPT-4" }, { id: "claude-v1", name: "Claude v1" }, ] export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) { const [selectedModel, setSelectedModel] = useState(models[0].id) const [temperature, setTemperature] = useState(0.7) return ( ) }

About

Tags

Share

More from cowlingchen-foxmailcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from cowlingchen-foxmailcom

More Templates Like This