[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Vision OS Dashboard", description: "A modern dashboard inspired by Apple Vision OS", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { // Redirect to login page redirect("/login") } [V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useForm } from "react-hook-form" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Loader2 } from "lucide-react" type LoginFormData = { username: string password: string ldapDomain?: string } export default function LoginForm() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [authMethod, setAuthMethod] = useState<"standard" | "ldap" | "sso">("standard") const { register, handleSubmit, formState: { errors }, } = useForm() const onSubmit = async (data: LoginFormData) => { setIsLoading(true) try { // Simulate authentication await new Promise((resolve) => setTimeout(resolve, 1500)) // In a real app, you would call your auth API here // const response = await fetch('/api/auth/login', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ ...data, method: authMethod }), // }); // if (!response.ok) throw new Error('Authentication failed'); // Redirect to server selection page router.push("/select-server") } catch (error) { console.error("Login error:", error) } finally { setIsLoading(false) } } const handleSSOLogin = async () => { setIsLoading(true) try { // Simulate SSO authentication await new Promise((resolve) => setTimeout(resolve, 1500)) // In a real app, you would redirect to SSO provider // window.location.href = '/api/auth/sso'; // For demo purposes, we'll just redirect to server selection router.push("/select-server") } catch (error) { console.error("SSO login error:", error) } finally { setIsLoading(false) } } return ( setAuthMethod(value as any)}> Username LDAP SSO

Click the button below to sign in with your organization's Single Sign-On provider.

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function DashboardPage() { // Redirect to the chat bots page as it's the default redirect("/dashboard/chat-bots") } [V0_FILE]typescriptreact:file="components/knowledge-library.tsx" isMerged="true" "use client" import { useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Trash2, Search, FileText } from "lucide-react" // Mock knowledge files data const knowledgeFiles = [ { id: "1", name: "Product Documentation.pdf", linkedBot: "Customer Support Bot", size: "2.4 MB", date: "2023-10-15" }, { id: "2", name: "FAQ.docx", linkedBot: "Sales Assistant", size: "1.1 MB", date: "2023-09-22" }, { id: "3", name: "Troubleshooting Guide.pdf", linkedBot: "Technical Support", size: "3.7 MB", date: "2023-11-05" }, { id: "4", name: "Company Policies.docx", linkedBot: "HR Assistant", size: "1.8 MB", date: "2023-08-30" }, { id: "5", name: "Marketing Strategy.pptx", linkedBot: "Marketing Bot", size: "4.2 MB", date: "2023-10-10" }, { id: "6", name: "User Manual.pdf", linkedBot: "Onboarding Guide", size: "5.6 MB", date: "2023-11-12" }, ] export default function KnowledgeLibrary() { const [searchQuery, setSearchQuery] = useState("") const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) const [fileToDelete, setFileToDelete] = useState(null) const filteredFiles = knowledgeFiles.filter( (file) => file.name.toLowerCase().includes(searchQuery.toLowerCase()) || file.linkedBot.toLowerCase().includes(searchQuery.toLowerCase()), ) const handleDeleteClick = (fileId: string) => { setFileToDelete(fileId) setDeleteDialogOpen(true) } const confirmDelete = () => { // In a real app, you would call your API to delete the file // await fetch(`/api/knowledge/${fileToDelete}`, { method: 'DELETE' }); setDeleteDialogOpen(false) setFileToDelete(null) } return (

setSearchQuery(e.target.value)} />

File Name Linked Bot Size Date Added Actions {filteredFiles.map((file) => ( {file.name} {file.linkedBot} {file.size} {file.date} ))} {filteredFiles.length === 0 && ( No files found matching your search. )}

) } [V0_FILE]typescriptreact:file="components/api-key-manager.tsx" isMerged="true" "use client" import { useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Search, Key, Trash2 } from "lucide-react" // Mock API keys data const apiKeys = [ { id: "1", name: "Production API Key", key: "sk_prod_••••••••••••••••", created: "2023-10-15", lastUsed: "2023-11-20", }, { id: "2", name: "Development API Key", key: "sk_dev_•••••••••••••••", created: "2023-09-22", lastUsed: "2023-11-19", }, { id: "3", name: "Testing API Key", key: "sk_test_••••••••••••••••", created: "2023-11-05", lastUsed: "2023-11-18" }, { id: "4", name: "Webhook API Key", key: "sk_hook_•••••••••••••••", created: "2023-08-30", lastUsed: "2023-11-15" }, ] export default function ApiKeyManager() { const [searchQuery, setSearchQuery] = useState("") const [revokeDialogOpen, setRevokeDialogOpen] = useState(false) const [keyToRevoke, setKeyToRevoke] = useState(null) const filteredKeys = apiKeys.filter((key) => key.name.toLowerCase().includes(searchQuery.toLowerCase())) const handleRevokeClick = (keyId: string) => { setKeyToRevoke(keyId) setRevokeDialogOpen(true) } const confirmRevoke = () => { // In a real app, you would call your API to revoke the key // await fetch(`/api/api-keys/${keyToRevoke}/revoke`, { method: 'POST' }); setRevokeDialogOpen(false) setKeyToRevoke(null) } return (

setSearchQuery(e.target.value)} />

Name API Key Created Last Used Actions {filteredKeys.map((apiKey) => ( {apiKey.name} {apiKey.key} {apiKey.created} {apiKey.lastUsed} ))} {filteredKeys.length === 0 && ( No API keys found matching your search. )}

) } [V0_FILE]typescriptreact:file="app/dashboard/admin/page.tsx" isMerged="true" export default function AdminPage() { return (

Admin Settings

Manage administrative settings

Admin settings content will go here.

) } [V0_FILE]typescriptreact:file="app/select-server/page.tsx" isEdit="true" isMerged="true" import ServerGrid from "@/components/server-grid" export default function SelectServerPage() { return (

Select a Server

Choose a server to connect to

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import DashboardSidebar from "@/components/dashboard-sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Add custom burgundy colors for direct use burgundy: { 50: "#fdf2f4", 100: "#fce7ea", 200: "#f8d0d7", 300: "#f2aab7", 400: "#e77a91", 500: "#d6506f", 600: "#be3154", 700: "#a02444", 800: "#85213c", 900: "#712037", 950: "#40101e", }, rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337", 950: "#4c0519", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/server-grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2, Search, Server } from "lucide-react" // Mock server data const servers = [ { id: "1", name: "Production Server", status: "online", location: "US East" }, { id: "2", name: "Development Server", status: "online", location: "US West" }, { id: "3", name: "Testing Server", status: "online", location: "Europe" }, { id: "4", name: "Staging Server", status: "maintenance", location: "Asia" }, { id: "5", name: "Backup Server", status: "online", location: "Australia" }, { id: "6", name: "Archive Server", status: "offline", location: "South America" }, ] export default function ServerGrid() { const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const [connecting, setConnecting] = useState(null) const filteredServers = servers.filter( (server) => server.name.toLowerCase().includes(searchQuery.toLowerCase()) || server.location.toLowerCase().includes(searchQuery.toLowerCase()), ) const handleConnect = async (serverId: string) => { setConnecting(serverId) try { // Simulate connection delay await new Promise((resolve) => setTimeout(resolve, 1500)) // In a real app, you would connect to the server here // const response = await fetch(`/api/servers/${serverId}/connect`, { // method: 'POST', // }); // if (!response.ok) throw new Error('Failed to connect to server'); // Redirect to dashboard router.push("/dashboard") } catch (error) { console.error("Server connection error:", error) } finally { setConnecting(null) } } return (

setSearchQuery(e.target.value)} />

{filteredServers.map((server) => ( {server.name} {server.location}

{server.status}

))}

{filteredServers.length === 0 && (

No servers found matching your search.

)}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 340 40% 10%; --card: 0 0% 100%; --card-foreground: 340 40% 10%; --popover: 0 0% 100%; --popover-foreground: 340 40% 10%; --primary: 340 60% 30%; --primary-foreground: 0 0% 98%; --secondary: 340 30% 96%; --secondary-foreground: 340 50% 20%; --muted: 340 20% 96%; --muted-foreground: 340 20% 40%; --accent: 340 40% 94%; --accent-foreground: 340 50% 20%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 340 30% 90%; --input: 340 30% 90%; --ring: 340 60% 30%; --radius: 1rem; } .dark { --background: 340 40% 5%; --foreground: 0 0% 98%; --card: 340 40% 8%; --card-foreground: 0 0% 98%; --popover: 340 40% 8%; --popover-foreground: 0 0% 98%; --primary: 340 50% 40%; --primary-foreground: 0 0% 98%; --secondary: 340 30% 15%; --secondary-foreground: 0 0% 98%; --muted: 340 30% 15%; --muted-foreground: 340 20% 70%; --accent: 340 30% 15%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 340 30% 20%; --input: 340 30% 20%; --ring: 340 50% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Vision OS inspired styles */ .vision-card { @apply bg-white/80 dark:bg-black/80 backdrop-blur-md rounded-2xl border border-white/20 dark:border-white/10 shadow-lg; } .vision-button { @apply bg-white/90 dark:bg-black/90 hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white backdrop-blur-md rounded-xl border border-white/20 dark:border-white/10 shadow-md transition-all duration-200 text-foreground dark:text-foreground; } /* Add a new class for active/selected buttons */ .vision-button-active { @apply bg-primary text-primary-foreground hover:bg-primary/90 dark:hover:bg-primary/90 backdrop-blur-md rounded-xl border border-primary/20 shadow-md transition-all duration-200; } .vision-input { @apply bg-white/70 dark:bg-black/70 backdrop-blur-md rounded-xl border border-white/20 dark:border-white/10 shadow-sm focus:ring-2 focus:ring-primary/20 transition-all duration-200; } .vision-sidebar { @apply bg-white/80 dark:bg-black/80 backdrop-blur-md border-r border-white/20 dark:border-white/10 shadow-lg; } .vision-modal { @apply bg-white/90 dark:bg-black/90 backdrop-blur-md rounded-2xl border border-white/20 dark:border-white/10 shadow-xl; } [V0_FILE]typescriptreact:file="app/dashboard/chat-bots/[id]/page.tsx" isEdit="true" isMerged="true" import ChatBotView from "@/components/chat-bot-view" export default function ChatBotPage({ params }: { params: { id: string } }) { return (

) } [V0_FILE]plaintext:file="public/images/tallgeese-ai-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TallgeeseAI_v1_s-2HYsGNkMhUErEZVHxIG0yfCniJHPSt.png" isMerged="true" [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true" import LoginForm from "@/components/login-form" import Image from "next/image" export default function LoginPage() { return (

) } [V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { usePathname, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { MessageSquare, Book, Key, Settings, LogOut, Server, ShieldCheck, ChevronDown, Menu, X } from "lucide-react" export default function DashboardSidebar() { const pathname = usePathname() const router = useRouter() const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const isActive = (path: string) => pathname === path const handleLogout = async () => { // In a real app, you would call your logout API here // await fetch('/api/auth/logout', { method: 'POST' }); // Redirect to login page router.push("/login") } const handleSwitchServer = () => { router.push("/select-server") } const navItems = [ { name: "Chat Bots", path: "/dashboard/chat-bots", icon: MessageSquare, }, { name: "Knowledge Library", path: "/dashboard/knowledge-library", icon: Book, }, { name: "API Keys", path: "/dashboard/api-keys", icon: Key, }, ] return ( <> {/* Mobile menu button */}

{/* Sidebar */}

router.push("/dashboard/admin")}> Admin Switch Server Log Out

) } [V0_FILE]typescriptreact:file="app/dashboard/chat-bots/page.tsx" isEdit="true" isMerged="true" import ChatBotList from "@/components/chat-bot-list" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function ChatBotsPage() { return (

Chat Bots

Manage your AI chat bots

) } [V0_FILE]typescriptreact:file="components/chat-bot-list.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search, MessageSquare, Edit } from "lucide-react" // Mock chat bot data const chatBots = [ { id: "1", name: "Customer Support Bot", description: "Handles customer inquiries and support tickets" }, { id: "2", name: "Sales Assistant", description: "Helps with product recommendations and sales inquiries" }, { id: "3", name: "Technical Support", description: "Provides technical troubleshooting and guidance" }, { id: "4", name: "HR Assistant", description: "Answers common HR and policy questions" }, { id: "5", name: "Marketing Bot", description: "Assists with marketing campaigns and content ideas" }, { id: "6", name: "Onboarding Guide", description: "Helps new users get started with the platform" }, ] export default function ChatBotList() { const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const filteredBots = chatBots.filter( (bot) => bot.name.toLowerCase().includes(searchQuery.toLowerCase()) || bot.description.toLowerCase().includes(searchQuery.toLowerCase()), ) const handleCardClick = (botId: string) => { // Navigate to the chat bot view page router.push(`/dashboard/chat-bots/${botId}`) } const handleEditClick = (e: React.MouseEvent, botId: string) => { // Stop the click event from bubbling up to the card e.stopPropagation() // In a real app, you would navigate to the bot edit page console.log(`Editing bot ${botId}`) // Example: router.push(`/dashboard/chat-bots/${botId}/edit`) } return (

setSearchQuery(e.target.value)} />

{filteredBots.map((bot) => ( handleCardClick(bot.id)} > {bot.name}

{bot.description}

))}

{filteredBots.length === 0 && (

No chat bots found matching your search.

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/knowledge-library/page.tsx" isEdit="true" import KnowledgeLibrary from "@/components/knowledge-library" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function KnowledgeLibraryPage() { return (

Knowledge Library

Manage your knowledge base files

) } [V0_FILE]typescriptreact:file="app/dashboard/api-keys/page.tsx" isEdit="true" import ApiKeyManager from "@/components/api-key-manager" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function ApiKeysPage() { return (

API Keys

Manage your API keys

) } [V0_FILE]typescriptreact:file="components/chat-bot-view.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { MessageSquare, MoreVertical, Edit, Trash2, Send, User, Bot } from "lucide-react" // Mock chat bot data const chatBots = [ { id: "1", name: "Customer Support Bot", description: "Handles customer inquiries and support tickets" }, { id: "2", name: "Sales Assistant", description: "Helps with product recommendations and sales inquiries" }, { id: "3", name: "Technical Support", description: "Provides technical troubleshooting and guidance" }, { id: "4", name: "HR Assistant", description: "Answers common HR and policy questions" }, { id: "5", name: "Marketing Bot", description: "Assists with marketing campaigns and content ideas" }, { id: "6", name: "Onboarding Guide", description: "Helps new users get started with the platform" }, ] // Mock conversation data const mockConversations = { "1": [ { id: "1", role: "user", content: "How do I reset my password?", timestamp: "2023-11-20T14:22:00Z" }, { id: "2", role: "bot", content: 'To reset your password, please go to the login page and click on "Forgot Password". You will receive an email with instructions to reset your password.', timestamp: "2023-11-20T14:22:10Z", }, { id: "3", role: "user", content: "What if I don't receive the email?", timestamp: "2023-11-20T14:23:00Z" }, { id: "4", role: "bot", content: "If you don't receive the email within a few minutes, please check your spam folder. If it's not there, you can try again or contact our support team at support@example.com.", timestamp: "2023-11-20T14:23:10Z", }, ], "2": [ { id: "1", role: "user", content: "Can you recommend a product for video editing?", timestamp: "2023-11-19T10:15:00Z", }, { id: "2", role: "bot", content: "For video editing, I recommend our Pro Editor Suite. It offers advanced editing features, effects, and supports 4K resolution. Would you like more details about this product?", timestamp: "2023-11-19T10:15:10Z", }, ], "3": [ { id: "1", role: "user", content: "My application keeps crashing, what should I do?", timestamp: "2023-11-18T16:40:00Z", }, { id: "2", role: "bot", content: "I'm sorry to hear that. Let's troubleshoot this issue. First, try restarting the application. If that doesn't work, please try clearing the cache and restarting your device. Is this a desktop or mobile application?", timestamp: "2023-11-18T16:40:15Z", }, ], "4": [ { id: "1", role: "user", content: "What's the company policy on remote work?", timestamp: "2023-11-17T09:30:00Z" }, { id: "2", role: "bot", content: "Our company allows employees to work remotely up to 3 days per week, with approval from their manager. The specific days should be coordinated with your team to ensure coverage. Would you like more details about our remote work policy?", timestamp: "2023-11-17T09:30:12Z", }, ], "5": [ { id: "1", role: "user", content: "I need ideas for our social media campaign", timestamp: "2023-11-16T13:20:00Z" }, { id: "2", role: "bot", content: "For your social media campaign, consider creating interactive polls, behind-the-scenes content, user-generated content contests, or a series of educational posts about your industry. What platform are you primarily focusing on?", timestamp: "2023-11-16T13:20:18Z", }, ], "6": [ { id: "1", role: "user", content: "How do I get started with the platform?", timestamp: "2023-11-15T11:10:00Z" }, { id: "2", role: "bot", content: "Welcome to our platform! To get started, I recommend completing your profile setup, exploring the dashboard to familiarize yourself with the features, and checking out our quick start guide. Would you like me to walk you through any specific feature?", timestamp: "2023-11-15T11:10:08Z", }, ], } export default function ChatBotView({ id }: { id: string }) { const router = useRouter() const [newMessage, setNewMessage] = useState("") const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) // Find the chat bot by ID const chatBot = chatBots.find((bot) => bot.id === id) // Get conversations for this bot const conversations = mockConversations[id as keyof typeof mockConversations] || [] // Handle if chat bot not found if (!chatBot) { return (

Chat Bot Not Found

The chat bot you're looking for doesn't exist.

) } const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!newMessage.trim()) return // In a real app, you would send this message to your API console.log("Sending message:", newMessage) // Clear the input setNewMessage("") } const handleDeleteBot = () => { // In a real app, you would call your API to delete the bot console.log("Deleting bot:", chatBot.id) // Close the dialog and navigate back to the chat bots list setDeleteDialogOpen(false) router.push("/dashboard/chat-bots") } const formatTimestamp = (timestamp: string) => { const date = new Date(timestamp) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } return (

{/* Header */}

{chatBot.name}

{chatBot.description}

router.push(`/dashboard/chat-bots/${id}/edit`)}> Edit Bot setDeleteDialogOpen(true)} > Delete Bot

{/* Conversation Area */}

{conversations.length > 0 ? (

{conversations.map((message) => (

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

{message.content}

{formatTimestamp(message.timestamp)}

))}

) : (

No conversations yet

Start a conversation with this bot by sending a message below.

)}

{/* Message Input - Fixed at bottom */}

{/* Delete Confirmation Dialog */}

) }