mirror of https://github.com/arc53/DocsGPT
add the conversation Tile
parent
f91ca796de
commit
10cf0470cb
@ -0,0 +1,84 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import Edit from '../assets/edit.svg';
|
||||||
|
import Exit from '../assets/exit.svg';
|
||||||
|
import Message from '../assets/message.svg';
|
||||||
|
|
||||||
|
import { selectConversationId } from '../preferences/preferenceSlice';
|
||||||
|
|
||||||
|
interface ConversationTileProps {
|
||||||
|
conversation: { name: string; id: string };
|
||||||
|
selectConversation: (arg1: string) => void;
|
||||||
|
onDeleteConversation: (arg1: string) => void;
|
||||||
|
onSave: ({ name, id }: { name: string; id: string }) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ConversationTile({
|
||||||
|
conversation,
|
||||||
|
selectConversation,
|
||||||
|
onDeleteConversation,
|
||||||
|
onSave,
|
||||||
|
}: ConversationTileProps) {
|
||||||
|
const conversationId = useSelector(selectConversationId);
|
||||||
|
|
||||||
|
const [isEdit, setIsEdit] = useState(false);
|
||||||
|
const [conversationName, setConversationsName] = useState(conversation.name);
|
||||||
|
|
||||||
|
function handleEditConversation() {
|
||||||
|
setIsEdit(true);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={() => {
|
||||||
|
selectConversation(conversation.id);
|
||||||
|
}}
|
||||||
|
className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
|
||||||
|
conversationId === conversation.id ? 'bg-gray-100' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<img src={Message} className="ml-2 w-5"></img>
|
||||||
|
{isEdit ? (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="h-10 w-full border-b-2 border-jet focus:outline-none"
|
||||||
|
value={conversationName}
|
||||||
|
onChange={(e) => setConversationsName(e.target.value)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="my-auto text-eerie-black">
|
||||||
|
{conversationName.length > 45
|
||||||
|
? conversationName.substring(0, 45) + '...'
|
||||||
|
: conversationName}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{conversationId === conversation.id ? (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={isEdit ? Exit : Edit}
|
||||||
|
alt="Edit"
|
||||||
|
className="mr-px h-4 w-4 cursor-pointer hover:opacity-50"
|
||||||
|
id={`img-${conversation.id}`}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
isEdit
|
||||||
|
? onSave({ id: conversationId, name: conversationName })
|
||||||
|
: handleEditConversation();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={Exit}
|
||||||
|
alt="Exit"
|
||||||
|
className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
|
||||||
|
id={`img-${conversation.id}`}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onDeleteConversation(conversation.id);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue