diff --git a/agenthub/app/agents/type.ts b/agenthub/app/agents/type.ts index 01860ec7..15dac194 100644 --- a/agenthub/app/agents/type.ts +++ b/agenthub/app/agents/type.ts @@ -8,6 +8,8 @@ export interface DatasetItem { favorites: string } +export type DatasetsTabItem = 'Recommended' | 'Writing' | 'Entertainment' | 'Programming' | 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other'; + export type AgentTabItem = 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other' diff --git a/agenthub/app/chat/page.tsx b/agenthub/app/chat/page.tsx index 5f547f80..4937d3ee 100644 --- a/agenthub/app/chat/page.tsx +++ b/agenthub/app/chat/page.tsx @@ -13,27 +13,11 @@ import { AgentCommand } from '@/components/chat/body/message-box'; import { baseUrl, serverUrl } from '@/lib/env'; import { generateSixDigitId } from '@/lib/utils'; - - -const updateChatName = (chatId: number, newName: string) => { - // setChats(prevChats => - // prevChats.map(chat => - // chat.id === chatId ? { ...chat, name: newName } : chat - // ) - // ); -}; - - - - - - - - const ChatInterface: React.FC = () => { - const [messages, setMessages] = useState([]); const [darkMode, setDarkMode] = useState(true); - const [chats, setChats] = useState([{ id: 1, name: 'General' }]); + const [chats, setChats] = useState([ + { id: 1, name: 'General', messages: [] } + ]); const [activeChat, setActiveChat] = useState(1); const messagesEndRef = useRef(null); @@ -62,7 +46,6 @@ const ChatInterface: React.FC = () => { content: string; } - function parseNamedContent(inputString: string) { // Regular expression to match the pattern ?>>Name/?>>\s*Content const regex = /\?>>(.*?)\/?>>([^?]*)/g; @@ -85,53 +68,65 @@ const ChatInterface: React.FC = () => { return results; } - // Ex - - useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); - }, [messages]); + }, [chats]); const handleSend = async (content: string, attachments: File[]) => { if (content.trim() || attachments.length > 0) { const newMessage: Message = { - id: generateSixDigitId(), + id: generateSixDigitId().toString(), text: content, sender: 'user', timestamp: new Date(), attachments: attachments.map(file => file.name), thinking: false }; - setMessages([...messages, newMessage]); - const messageId = generateSixDigitId(); + setChats(prevChats => prevChats.map(chat => + chat.id === activeChat + ? { ...chat, messages: [...chat.messages, newMessage] } + : chat + )); - // Handle file uploads here (e.g., to a server) + const messageId = generateSixDigitId().toString(); const botMessage: Message = { id: messageId, - text: ``, + text: '', sender: 'bot', timestamp: new Date(), thinking: true }; - setMessages(prevMessages => [...prevMessages, botMessage]); - - const res = await processAgentCommand(parseNamedContent(parseText(content))[0] as AgentCommand) - - setMessages(prevMessages => [...prevMessages].map(message => { - if (message.id == messageId) { - return { ...message, thinking: false, text: res.content }; - } - // return res.content; - return message; - })); + setChats(prevChats => prevChats.map(chat => + chat.id === activeChat + ? { ...chat, messages: [...chat.messages, botMessage] } + : chat + )); + + const res = await processAgentCommand(parseNamedContent(parseText(content))[0] as AgentCommand); + + setChats(prevChats => prevChats.map(chat => + chat.id === activeChat + ? { + ...chat, + messages: chat.messages.map(message => + message.id === messageId + ? { ...message, thinking: false, text: res.content } + : message + ) + } + : chat + )); } - }; const addChat = () => { - const newChat: Chat = { id: Date.now(), name: `Chat ${chats.length + 1}` }; + const newChat: Chat = { + id: Date.now(), + name: `Chat ${chats.length + 1}`, + messages: [] + }; setChats([...chats, newChat]); setActiveChat(newChat.id); }; @@ -178,7 +173,6 @@ const ChatInterface: React.FC = () => { recent_response = "Agent Had Difficulty Thinking" } - //return recent_response return { name: command.name, @@ -188,6 +182,29 @@ const ChatInterface: React.FC = () => { const mounted = useMounted(); + const activeMessages = chats.find(chat => chat.id === activeChat)?.messages || []; + + // Add updateChatName function + const updateChatName = (chatId: number, newName: string) => { + setChats(prevChats => + prevChats.map(chat => + chat.id === chatId ? { ...chat, name: newName } : chat + ) + ); + }; + + // Add deleteChat function + const deleteChat = (chatId: number) => { + setChats(prevChats => { + const filteredChats = prevChats.filter(chat => chat.id !== chatId); + // If the deleted chat is the active one, switch to the first chat + if (chatId === activeChat && filteredChats.length > 0) { + setActiveChat(filteredChats[0].id); + } + return filteredChats; + }); + }; + return (
{ setActiveChat={setActiveChat} addChat={addChat} updateChatName={updateChatName} + deleteChat={deleteChat} darkMode={darkMode} />
-
- +
chat.id === activeChat)?.name || 'Chat'} + /> +
{mounted && }
@@ -211,5 +233,4 @@ const ChatInterface: React.FC = () => { ); }; - export default ChatInterface; diff --git a/agenthub/components/agentchat/Header.tsx b/agenthub/components/agentchat/Header.tsx index 0064fdd2..92cdc4ec 100644 --- a/agenthub/components/agentchat/Header.tsx +++ b/agenthub/components/agentchat/Header.tsx @@ -5,16 +5,17 @@ import { Sun, Moon, Hash } from 'lucide-react'; export interface HeaderProps { darkMode: boolean; - setDarkMode: React.Dispatch>; + setDarkMode: (value: boolean) => void; + title: string; } -export const Header: React.FC = ({ darkMode, setDarkMode }) => { +export const Header: React.FC = ({ darkMode, setDarkMode, title }) => { const theme = useMantineTheme(); return (
-

General

+

{title}

diff --git a/agenthub/components/agentchat/Sidebar.tsx b/agenthub/components/agentchat/Sidebar.tsx index e9496359..6076569f 100644 --- a/agenthub/components/agentchat/Sidebar.tsx +++ b/agenthub/components/agentchat/Sidebar.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { TextInput, ActionIcon, Tooltip } from '@mantine/core'; -import { Plus, Hash, Check, Edit2, X } from 'lucide-react'; +import { Plus, Hash, Check, Edit2, X, Trash2 } from 'lucide-react'; import { Chat } from '@/interfaces/agentchat'; @@ -11,10 +11,11 @@ export interface SidebarProps { setActiveChat: (id: number) => void; addChat: () => void; updateChatName: (chatId: number, newName: string) => void; + deleteChat: (chatId: number) => void; darkMode: boolean; } -export const Sidebar: React.FC = ({ chats, activeChat, setActiveChat, addChat, updateChatName, darkMode }) => { +export const Sidebar: React.FC = ({ chats, activeChat, setActiveChat, addChat, updateChatName, deleteChat, darkMode }) => { const [editingId, setEditingId] = useState(null); const [editingName, setEditingName] = useState(''); @@ -40,6 +41,13 @@ export const Sidebar: React.FC = ({ chats, activeChat, setActiveCh } }; + const handleDelete = (chatId: number, e: React.MouseEvent) => { + e.stopPropagation(); + if (window.confirm('Are you sure you want to delete this channel?')) { + deleteChat(chatId); + } + }; + return (
@@ -54,7 +62,7 @@ export const Sidebar: React.FC = ({ chats, activeChat, setActiveCh onClick={addChat} variant="subtle" color={darkMode ? "gray" : "dark"} - className="hover:bg-gray-600 pointer-events-none hover:pointer-events-none" + className="hover:bg-gray-600 cursor-pointer" > @@ -63,7 +71,7 @@ export const Sidebar: React.FC = ({ chats, activeChat, setActiveCh {chats.map((chat) => (
{editingId === chat.id ? (
@@ -89,16 +97,38 @@ export const Sidebar: React.FC = ({ chats, activeChat, setActiveCh {chat.name}
- - startEditing(chat)} - variant="subtle" - color={darkMode ? "gray" : "dark"} - className="opacity-0 group-hover:opacity-100 transition-opacity duration-200" - > - - - +
+ + { + e.stopPropagation(); + startEditing(chat); + }} + variant="subtle" + color={darkMode ? "gray" : "dark"} + size="sm" + className="ml-1" + > + + + + + handleDelete(chat.id, e)} + variant="subtle" + size="sm" + className="ml-1" + > + + + +
)}
@@ -107,3 +137,5 @@ export const Sidebar: React.FC = ({ chats, activeChat, setActiveCh
); }; + +export default Sidebar; diff --git a/agenthub/interfaces/agentchat.ts b/agenthub/interfaces/agentchat.ts new file mode 100644 index 00000000..9ea29243 --- /dev/null +++ b/agenthub/interfaces/agentchat.ts @@ -0,0 +1,14 @@ +export interface Message { + id: string; + text: string; + sender: 'user' | 'bot'; + timestamp: Date; + attachments?: string[]; + thinking?: boolean; +} + +export interface Chat { + id: number; + name: string; + messages: Message[]; +} \ No newline at end of file