Add Bots feature
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,16 +1,16 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { MessageSquare, Image, Mic, ArrowLeft, Plus, ChevronLeft, ChevronRight } from "lucide-react";
|
import { MessageSquare, Image, Mic, ArrowLeft, Plus, ChevronLeft, ChevronRight, Bot } from "lucide-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Separator } from "@/components/ui/separator";
|
import { Separator } from "@/components/ui/separator";
|
||||||
import { ThemeToggle } from "@/components/ThemeToggle";
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||||
|
|
||||||
interface LayoutProps {
|
interface LayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
activeTab: "chat" | "images" | "audio";
|
activeTab: "chat" | "images" | "audio" | "bots";
|
||||||
onTabChange: (tab: "chat" | "images" | "audio") => void;
|
onTabChange: (tab: "chat" | "images" | "audio" | "bots") => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
type TabType = "chat" | "images" | "audio";
|
type TabType = "chat" | "images" | "audio" | "bots";
|
||||||
|
|
||||||
export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||||
@@ -19,6 +19,7 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
|||||||
{ id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
|
{ id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
|
||||||
{ id: "images" as TabType, label: "Imagens", icon: Image },
|
{ id: "images" as TabType, label: "Imagens", icon: Image },
|
||||||
{ id: "audio" as TabType, label: "Áudio", icon: Mic },
|
{ id: "audio" as TabType, label: "Áudio", icon: Mic },
|
||||||
|
{ id: "bots" as TabType, label: "Bots", icon: Bot },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -0,0 +1,120 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ChatMessage } from "@/components/chat/ChatMessage";
|
||||||
|
import { ChatInput } from "@/components/chat/ChatInput";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
|
||||||
|
interface Bot {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
prompt: string;
|
||||||
|
model: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Message {
|
||||||
|
id: string;
|
||||||
|
role: "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
model?: string;
|
||||||
|
attachments?: Array<{
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
size: number;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BotChatProps {
|
||||||
|
bot: Bot;
|
||||||
|
onBack: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BotChat = ({ bot, onBack }: BotChatProps) => {
|
||||||
|
const [messages, setMessages] = useState<Message[]>([
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
role: "assistant",
|
||||||
|
content: `Olá! Sou ${bot.name}. ${bot.prompt}`,
|
||||||
|
model: bot.model,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleSendMessage = (content: string, files?: File[]) => {
|
||||||
|
const newMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
role: "user",
|
||||||
|
content,
|
||||||
|
attachments: files?.map((file) => ({
|
||||||
|
name: file.name,
|
||||||
|
type: file.type,
|
||||||
|
size: file.size,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, newMessage]);
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
// Simulate AI response
|
||||||
|
setTimeout(() => {
|
||||||
|
const aiResponse: Message = {
|
||||||
|
id: (Date.now() + 1).toString(),
|
||||||
|
role: "assistant",
|
||||||
|
content: `Resposta do ${bot.name} usando ${bot.model}. Esta é uma resposta simulada considerando as instruções: "${bot.prompt}"`,
|
||||||
|
model: bot.model,
|
||||||
|
};
|
||||||
|
setMessages((prev) => [...prev, aiResponse]);
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 flex flex-col h-full">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="border-b border-border p-4 flex items-center gap-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={onBack}
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold">{bot.name}</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">{bot.model}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<ScrollArea className="flex-1">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{messages.map((message) => (
|
||||||
|
<ChatMessage
|
||||||
|
key={message.id}
|
||||||
|
role={message.role}
|
||||||
|
content={message.content}
|
||||||
|
model={message.model}
|
||||||
|
attachments={message.attachments}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex gap-4 py-6 px-6 bg-muted/30">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
||||||
|
<div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1 items-center">
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" />
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100" />
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
{/* Input */}
|
||||||
|
<ChatInput onSendMessage={handleSendMessage} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Bot, Edit, MessageSquare, Trash2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
|
||||||
|
interface Bot {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
prompt: string;
|
||||||
|
model: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BotViewProps {
|
||||||
|
onStartChat: (bot: Bot) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BotView = ({ onStartChat }: BotViewProps) => {
|
||||||
|
const [bots, setBots] = useState<Bot[]>([]);
|
||||||
|
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||||
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||||
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||||
|
const [selectedBot, setSelectedBot] = useState<Bot | null>(null);
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
prompt: "",
|
||||||
|
model: "ChatGPT 4.1",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleCreateBot = () => {
|
||||||
|
const newBot: Bot = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
name: formData.name,
|
||||||
|
prompt: formData.prompt,
|
||||||
|
model: formData.model,
|
||||||
|
};
|
||||||
|
setBots([...bots, newBot]);
|
||||||
|
setFormData({ name: "", prompt: "", model: "ChatGPT 4.1" });
|
||||||
|
setIsCreateDialogOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditBot = () => {
|
||||||
|
if (!selectedBot) return;
|
||||||
|
setBots(bots.map(bot =>
|
||||||
|
bot.id === selectedBot.id
|
||||||
|
? { ...bot, name: formData.name, prompt: formData.prompt, model: formData.model }
|
||||||
|
: bot
|
||||||
|
));
|
||||||
|
setIsEditDialogOpen(false);
|
||||||
|
setSelectedBot(null);
|
||||||
|
setFormData({ name: "", prompt: "", model: "ChatGPT 4.1" });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteBot = () => {
|
||||||
|
if (!selectedBot) return;
|
||||||
|
setBots(bots.filter(bot => bot.id !== selectedBot.id));
|
||||||
|
setIsDeleteDialogOpen(false);
|
||||||
|
setSelectedBot(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEditDialog = (bot: Bot) => {
|
||||||
|
setSelectedBot(bot);
|
||||||
|
setFormData({
|
||||||
|
name: bot.name,
|
||||||
|
prompt: bot.prompt,
|
||||||
|
model: bot.model,
|
||||||
|
});
|
||||||
|
setIsEditDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDeleteDialog = (bot: Bot) => {
|
||||||
|
setSelectedBot(bot);
|
||||||
|
setIsDeleteDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 flex flex-col h-full overflow-hidden">
|
||||||
|
<div className="border-b border-border p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold flex items-center gap-2">
|
||||||
|
<Bot className="w-6 h-6" />
|
||||||
|
Gerenciador de Bots
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted-foreground mt-1">Crie e gerencie seus assistentes de IA</p>
|
||||||
|
</div>
|
||||||
|
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Bot className="w-4 h-4 mr-2" />
|
||||||
|
Criar Bot
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Criar Novo Bot</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Configure seu assistente de IA personalizado
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="name">Nome</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
placeholder="Ex: Assistente de Programação"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="prompt">Prompt</Label>
|
||||||
|
<Textarea
|
||||||
|
id="prompt"
|
||||||
|
value={formData.prompt}
|
||||||
|
onChange={(e) => setFormData({ ...formData, prompt: e.target.value })}
|
||||||
|
placeholder="Defina a personalidade e instruções do bot..."
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="model">Modelo de IA</Label>
|
||||||
|
<Select value={formData.model} onValueChange={(value) => setFormData({ ...formData, model: value })}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="ChatGPT 4.1">ChatGPT 4.1</SelectItem>
|
||||||
|
<SelectItem value="ChatGPT 4.0">ChatGPT 4.0</SelectItem>
|
||||||
|
<SelectItem value="Claude 3.5">Claude 3.5</SelectItem>
|
||||||
|
<SelectItem value="Gemini Pro">Gemini Pro</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCreateBot} disabled={!formData.name || !formData.prompt}>
|
||||||
|
Criar Bot
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-auto p-6">
|
||||||
|
{bots.length === 0 ? (
|
||||||
|
<Card className="max-w-2xl mx-auto mt-12">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Bot className="w-5 h-5" />
|
||||||
|
Nenhum bot criado
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Comece criando seu primeiro assistente de IA personalizado
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">
|
||||||
|
Crie bots com diferentes personalidades, instruções e modelos de IA para diferentes propósitos.
|
||||||
|
</p>
|
||||||
|
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||||
|
<Bot className="w-4 h-4 mr-2" />
|
||||||
|
Criar Primeiro Bot
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Nome</TableHead>
|
||||||
|
<TableHead>Modelo</TableHead>
|
||||||
|
<TableHead className="text-right">Ações</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{bots.map((bot) => (
|
||||||
|
<TableRow key={bot.id}>
|
||||||
|
<TableCell className="font-medium">{bot.name}</TableCell>
|
||||||
|
<TableCell>{bot.model}</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onStartChat(bot)}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
Conversar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => openEditDialog(bot)}
|
||||||
|
>
|
||||||
|
<Edit className="w-4 h-4 mr-2" />
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => openDeleteDialog(bot)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4 mr-2" />
|
||||||
|
Excluir
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Edit Dialog */}
|
||||||
|
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Editar Bot</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Atualize as configurações do seu assistente
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-name">Nome</Label>
|
||||||
|
<Input
|
||||||
|
id="edit-name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-prompt">Prompt</Label>
|
||||||
|
<Textarea
|
||||||
|
id="edit-prompt"
|
||||||
|
value={formData.prompt}
|
||||||
|
onChange={(e) => setFormData({ ...formData, prompt: e.target.value })}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="edit-model">Modelo de IA</Label>
|
||||||
|
<Select value={formData.model} onValueChange={(value) => setFormData({ ...formData, model: value })}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="ChatGPT 4.1">ChatGPT 4.1</SelectItem>
|
||||||
|
<SelectItem value="ChatGPT 4.0">ChatGPT 4.0</SelectItem>
|
||||||
|
<SelectItem value="Claude 3.5">Claude 3.5</SelectItem>
|
||||||
|
<SelectItem value="Gemini Pro">Gemini Pro</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleEditBot} disabled={!formData.name || !formData.prompt}>
|
||||||
|
Salvar Alterações
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Delete Confirmation */}
|
||||||
|
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Excluir Bot</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Tem certeza que deseja excluir o bot "{selectedBot?.name}"? Esta ação não pode ser desfeita.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||||
|
<AlertDialogAction onClick={handleDeleteBot}>
|
||||||
|
Excluir
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
+26
-1
@@ -3,15 +3,40 @@ import { Layout } from "@/components/Layout";
|
|||||||
import { ChatView } from "@/components/chat/ChatView";
|
import { ChatView } from "@/components/chat/ChatView";
|
||||||
import { ImageView } from "@/components/images/ImageView";
|
import { ImageView } from "@/components/images/ImageView";
|
||||||
import { AudioView } from "@/components/audio/AudioView";
|
import { AudioView } from "@/components/audio/AudioView";
|
||||||
|
import { BotView } from "@/components/bots/BotView";
|
||||||
|
import { BotChat } from "@/components/bots/BotChat";
|
||||||
|
|
||||||
|
interface Bot {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
prompt: string;
|
||||||
|
model: string;
|
||||||
|
}
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
const [activeView, setActiveView] = useState<"chat" | "images" | "audio">("chat");
|
const [activeView, setActiveView] = useState<"chat" | "images" | "audio" | "bots">("chat");
|
||||||
|
const [activeBotChat, setActiveBotChat] = useState<Bot | null>(null);
|
||||||
|
|
||||||
|
const handleStartBotChat = (bot: Bot) => {
|
||||||
|
setActiveBotChat(bot);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromBotChat = () => {
|
||||||
|
setActiveBotChat(null);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout activeTab={activeView} onTabChange={setActiveView}>
|
<Layout activeTab={activeView} onTabChange={setActiveView}>
|
||||||
{activeView === "chat" && <ChatView />}
|
{activeView === "chat" && <ChatView />}
|
||||||
{activeView === "images" && <ImageView />}
|
{activeView === "images" && <ImageView />}
|
||||||
{activeView === "audio" && <AudioView />}
|
{activeView === "audio" && <AudioView />}
|
||||||
|
{activeView === "bots" && (
|
||||||
|
activeBotChat ? (
|
||||||
|
<BotChat bot={activeBotChat} onBack={handleBackFromBotChat} />
|
||||||
|
) : (
|
||||||
|
<BotView onStartChat={handleStartBotChat} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user