Skip to main content

​
Overview

The useChat hook provides chat management functionality, allowing users to retrieve their chat list, create new chats, and delete existing chats. It integrates with localStorage to persist the current active chat.

​
Hook Signature

const {
  chatsList,
  newChat,
  deleteChat
} = useChat();

​
Return Value

The hook returns an object containing the following functions:

​
Functions

​
chatsList

async (user) => Promise<Array | string>
Retrieves all chats for a specific user. Parameters:
  • user (Object): User object containing:
    • id (string/number): User ID
Returns:
  • On success: Array of chat objects
  • On error: Error message string
Example: 
const chats = await chatsList({ id: userId });
if (Array.isArray(chats)) {
  // Handle successful chat list
  console.log('User chats:', chats);
} else {
  // Handle error message
  console.error('Error:', chats);
}

​
newChat

async (chat) => Promise<Object | string>
Creates a new chat and saves it to localStorage. Parameters:
  • chat (Object): Chat data object containing chat details
Returns:
  • On success: Newly created chat object
  • On error: Error message string
Behavior:
  • Creates a new chat via API
  • Saves the new chat to localStorage as the active chat
  • Returns the created chat data
Example: 
const chatData = {
  userId: currentUser.id,
  title: 'New Conversation',
  // other chat properties
};

const result = await newChat(chatData);
if (typeof result === 'object') {
  console.log('Chat created:', result);
} else {
  console.error('Error:', result);
}

​
deleteChat

async (id) => Promise<string>
Deletes a chat by its ID. Parameters:
  • id (string/number): Chat ID to delete
Returns:
  • On success: 'Chat eliminado' (Chat deleted)
  • On error: Error message string
Example: 
const result = await deleteChat(chatId);
if (result === 'Chat eliminado') {
  console.log('Chat successfully deleted');
  // Refresh chat list
} else {
  console.error('Delete failed:', result);
}

​
Usage Example

import { useChat } from '../hooks/useChat';
import { useContext, useEffect, useState } from 'react';
import UserContext from '../contexts/UserContext';

function ChatList() {
  const { chatsList, newChat, deleteChat } = useChat();
  const { user } = useContext(UserContext);
  const [chats, setChats] = useState([]);

  // Load user's chats
  useEffect(() => {
    const loadChats = async () => {
      const userChats = await chatsList(user);
      if (Array.isArray(userChats)) {
        setChats(userChats);
      }
    };
    loadChats();
  }, [user, chatsList]);

  // Create new chat
  const handleNewChat = async () => {
    const chatData = { userId: user.id, title: 'Nueva conversación' };
    const result = await newChat(chatData);
    if (typeof result === 'object') {
      setChats([...chats, result]);
    }
  };

  // Delete chat
  const handleDeleteChat = async (chatId) => {
    const result = await deleteChat(chatId);
    if (result === 'Chat eliminado') {
      setChats(chats.filter(chat => chat.id !== chatId));
    }
  };

  return (
    <div>
      <button onClick={handleNewChat}>New Chat</button>
      <ul>
        {chats.map(chat => (
          <li key={chat.id}>
            {chat.title}
            <button onClick={() => handleDeleteChat(chat.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

​
Dependencies

This hook requires:
  • useLocalStorage hook for persisting active chat
  • chatService for API calls:
    • getChatsById: Fetch chats by user ID
    • creatChat: Create a new chat
    • deletechat: Delete a chat by ID

​
Notes

  • All functions use useCallback for optimization
  • The active chat is automatically saved to localStorage when created
  • Error handling returns string messages for easy display
  • Success responses return data objects or confirmation strings
  • The hook does not manage loading or error states - components should handle these

Build docs developers (and LLMs) love

Get started for freeTalk to us