interstellar_ai/app/components/History.tsx

import React, { useState } from 'react';
import { useChatHistory } from '../hooks/useChatHistory';

const History: React.FC = () => {
  const [chatHistory, setChatHistory, setSelectedIndex] = useChatHistory()

  const handleHistoryClick = (index: number) => {
    setSelectedIndex(index)
  }

  return (
    <div className="history-background">
      <div className="history">
        <ul>
          {/* Populate with history items */}
          {chatHistory.chats.map((chats, index) => (
            <li key={index}>
              <a href="#" onClick={() => handleHistoryClick(index)}>{chatHistory.chats[index].name}</a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default History;