Untitled

import React, { useState, useEffect } from 'react';
import { Image, Code, FileText, GitBranch } from 'lucide-react';
import { checkIfStartsWithGS, diTimeFormat, errorMessage } from '../../utils/helpers';
import { secureApi } from '../../Config/api';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { allPaths } from '../../utils/constants';
import { sessionHistories } from '../../Redux/actions/searchActions';
import { updateHistory } from '../../Redux/actions/historyActions';


// Tool icon mapping
const ToolIcon = ({ toolType }) => {
  switch (toolType) {
    case 'image_generator':
      return <Image size={16} color="#6366f1" />;
    case 'code_generator':
      return <Code size={16} color="#10b981" />;
    case 'svg_generator':
      return <FileText size={16} color="#f59e0b" />;
    case 'mermaid_generator':
      return <GitBranch size={16} color="#3b82f6" />;
    default:
      return <FileText size={16} color="#6b7280" />;
  }
};

// Tool name mapping
const getToolName = (toolType) => {
  const names = {
    image_generator: 'Image',
    code_generator: 'Code',
    svg_generator: 'SVG',
    mermaid_generator: 'Diagram',
  };
  return names[toolType] || 'Search';
};

const ProjectsHistory = ({ id }) => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const DI_PROJECT_URL = useSelector((state) => state?.appReducer?.DI_PROJECT_URL);
  const [history, setHistory] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [selectedFilter, setSelectedFilter] = useState('all');
  const [dateRange, setDateRange] = useState({ start: '', end: '' });
  const [totalCount, setTotalCount] = useState(0);
  const [selectedHistory, setSelectedHistory] = useState(null);
  const [noOfRows, setNoOfRows] = useState(10);
  const [pageNo, setPageNo] = useState(1);
  const [totalPageNo, setTotalPageNo] = useState(null);
  const itemsPerPage = 10;

  useEffect(() => {
    fetchChatHistory();
  }, [currentPage, selectedFilter, dateRange, id]);

  const fetchChatHistory = async () => {
    setIsLoading(true);
    try {
      secureApi
        .get(
          `${DI_PROJECT_URL}/api/v1.0/project/sessions?project_id=${id}`, { withCredentials: true }
        )
        .then((data) => {
          if (data?.success) {
            setHistory(data?.search_list);
          } else {
            errorMessage(data?.message);
          }
          setIsLoading(false);
        })
        .catch((e) => {
          errorMessage('Conversation history get failed');
        })
        .finally(() => {
          setIsLoading(false);
        });
    } catch (error) {
      setIsLoading(false);
    }
  };

  const historyCall = (v) => {
    dispatch(sessionHistories([]));
    dispatch(updateHistory([]));
    navigate(
      `${allPaths?.SEARCH_RESULT}?search=${v?.name || 'New Conversation'}&history=${v?.id}&session_id=${v?.id}&is_search=false&model_name=${v?.llm_model?.model_name}&model_type=${v?.llm_model?.model_type}&isGoverned=${false}&showdiWriter=${false}&showAudioView=${false}&showGoogleSeach=${false}&isCitationView=${false}&tool_type=&project_id=${id}`
    )
  }

  return (
    <div className="">
      <div className="py-6 border-b border-gray-200">
        <h2 className="text-2xl font-semibold text-gray-800 mb-2">Conversation History</h2>
        <div className="bg-gray-50 rounded-md">
          {isLoading ? (
            <div className="flex justify-center items-center py-20">
              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
            </div>
          ) : !!history?.length ? (
            <div className="divide-y divide-gray-200">
              {history?.map((item) => (
                <div
                  key={item.id}
                  className={`p-3 hover:bg-gray-100 transition-colors cursor-pointer ${selectedHistory === item.id ? 'bg-blue-50' : ''}`}
                  onClick={() => historyCall(item)}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <h3 className="text-xs mb-0 text-gray-900 truncate">{item.name}</h3>
                    </div>
                    <div className="text-right text-sm text-gray-500 min-w-max">{diTimeFormat(item.created_at)}</div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="py-20 text-center">
              <p className="text-gray-500">No conversation history found</p>
            </div>
          )}
        </div>

        {/* Pagination */}
        {/* {!!history?.length && (
          <div className="pagination-list pagination-list-end">
            <Pagination
              color="primary"
              variant="outlined"
              shape="rounded"
              count={Math.ceil(totalPageNo / noOfRows)}
              page={pageNo}
              onChange={getPage}
            />
            <span className="rowsPerPage">
              <div>
                <p>Rows per page:</p>
              </div>
              <Select
                style={{
                  width: 70,
                  marginLeft: 5,
                }}
                value={noOfRows}
                optionFilterProp="children"
                onChange={handleChangeRowsPerPage}
                options={[
                  {
                    value: 10,
                    label: 10,
                  },
                  {
                    value: 20,
                    label: 20,
                  },
                  {
                    value: 50,
                    label: 50,
                  },
                ]}
              />
            </span>
          </div>
        )} */}
      </div>
    </div>
  );
};

export default ProjectsHistory;