[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="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/sidebar.tsx" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Star, MessageSquare, Image, Archive, Settings, Info, Plus } from "lucide-react" export function Sidebar() { return (

Chatbox

对话

{Array.from({ length: 5 }).map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Sidebar } from "@/components/sidebar" import { Chat } from "@/components/chat" export default function Home() { return ( <> ) } [V0_FILE]css:file="app/globals.css" @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" "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 ( ) } [V0_FILE]typescriptreact:file="components/chat.tsx" 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 } 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 [conversation, setConversation] = useState(mockConversations[0]) 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 = conversation 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() } setConversation((prev) => ({ ...prev, messages: [...prev.messages, newMessage], })) setInput("") setTimeout(() => { const aiResponse: Message = { role: "assistant", content: "这是一个模拟的 AI 回复。" } setConversation((prev) => ({ ...prev, messages: [...prev.messages, aiResponse], })) }, 1000) } } const handleLinkInsert = () => { if (linkUrl) { const newText = input + ` [链接](${linkUrl})` setInput(newText) setLinkUrl("") setIsLinkDialogOpen(false) } } return (

{conversation.title}

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

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

{message.content}

))}

) }

About

Tags

Share

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