Skip to content

Commit

Permalink
add delete session function
Browse files Browse the repository at this point in the history 
Signed-off-by: cbh778899 <[email protected]>
  • Loading branch information
@cbh778899
cbh778899 committed Sep 17, 2024
1 parent bf150bc commit 43bf848
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 46 deletions.
78 changes: 39 additions & 39 deletions src/components/chat/Conversation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,48 +146,48 @@ export default function Conversation({ uid, client, updateClient }) {
{
uid ?
<>
<div className="bubbles" ref={bubblesRef}>
{ conversation.map(({role, content}, idx) => {
return (
<ConversationBubble
key={`conversation-history-${uid}-${idx}`}
role={role} content={content}
/>
)
}) }
<ConversationBubble
role={'assistant'} content={pending_message}
hidden={hide_pending} special={true}
/>
</div>
<form className="send-message-form" onSubmit={sendMessage}>
<div className="input-container">
{
chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
<div className="button-container file-upload">
{
upload_file ?
upload_file.type.startsWith("image") ?
<FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
<Paperclip className="button-icon" />
}
<input
type="file" className="clickable"
title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
</div>
}
<input type="text" value={message} onChange={messageOnChange}/>
<div className="button-container">
{
hide_pending ?
<Send className="button-icon animated" /> :
<StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
<div className="bubbles" ref={bubblesRef}>
{ conversation.map(({role, content}, idx) => {
return (
<ConversationBubble
key={`conversation-history-${uid}-${idx}`}
role={role} content={content}
/>
)
}) }
<ConversationBubble
role={'assistant'} content={pending_message}
hidden={hide_pending} special={true}
/>
</div>
<form className="send-message-form" onSubmit={sendMessage}>
<div className="input-container">
{
chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
<div className="button-container file-upload">
{
upload_file ?
upload_file.type.startsWith("image") ?
<FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
<Paperclip className="button-icon" />
}
<input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
<input
type="file" className="clickable"
title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
</div>
}
<input type="text" value={message} onChange={messageOnChange}/>
<div className="button-container">
{
hide_pending ?
<Send className="button-icon animated" /> :
<StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
}
<input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
</div>
</form>
</div>
</form>
</> :
<div className="no-conversation">Please select a conversation or start a new one.</div>
}
Expand Down
12 changes: 11 additions & 1 deletion src/components/chat/Ticket.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
export default function Ticket({ title, info, selectChat, is_selected }) {
import { XLg } from "react-bootstrap-icons";

export default function Ticket({ title, info, selectChat, is_selected, deleteHistory }) {

return (
<div
className={`ticket clickable${is_selected ? " selected":""}`}
onClick={()=>selectChat(info)}
>
{ title }
<XLg
className="delete-icon clickable"
onClick={evt=>{
evt.stopPropagation();
deleteHistory({ uid: info.uid, title })
}}
/>
</div>
)
}
9 changes: 5 additions & 4 deletions src/components/chat/Tickets.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import Ticket from "./Ticket";
import useIDB from "../../utils/idb";
import { genRandomID } from "../../utils/tools";

export default function Tickets({selectChat, current_chat, history, setHistory}) {
export default function Tickets({selectChat, current_chat, history, setHistory, deleteHistory}) {

const idb = useIDB();

async function syncHistory() {
const history = await idb.getAll('chat-history')
history.sort((a, b)=>b.updatedAt - a.updatedAt)
setHistory(history)
setHistory(history.map(e=>{return {...e, client: null}}))
}

async function startNewConversation() {
Expand All @@ -27,7 +27,7 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
const new_conv_info = await idb.getByID('chat-history', conv_id);
new_conv_info &&
setHistory([
new_conv_info,
{...new_conv_info, client: null},
...history
])
selectChat(new_conv_info)
Expand All @@ -50,9 +50,10 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
const { title, uid } = elem;
return (
<Ticket
key={`ticket-${title}-${uid}`}
key={`ticket-${uid}`}
title={title} info={elem}
selectChat={selectChat}
deleteHistory={deleteHistory}
is_selected={current_chat.uid && uid === current_chat.uid}
/>
)
Expand Down
53 changes: 51 additions & 2 deletions src/components/chat/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { useState } from "react";
import { useEffect, useRef, useState } from "react";
import Tickets from "./Tickets";
import Conversation from "./Conversation";
import useIDB from "../../utils/idb";

export default function Chat() {

const [chat, selectChat] = useState({});
const [history, setHistory] = useState([]);
const idb = useIDB();
const dialogRef = useRef(null);
const [showConfirm, toggleConfirm] = useState(false);
const [conv_to_delete, requestDelete] = useState(null);

function updateChatClient(client) {
selectChat({
Expand All @@ -19,10 +24,54 @@ export default function Chat() {
setHistory(history_cp);
}

function resetRequestDelete() {
requestDelete(null);
toggleConfirm(false);
}

async function deleteHistory() {
if(!conv_to_delete) return;

const {uid} = conv_to_delete;
await idb.deleteOne("chat-history", [{uid}]);
await idb.deleteAll("messages", [{'history-uid': uid}]);
setHistory(history.filter(e=>e.uid !== uid));
uid === chat.uid && selectChat({});
resetRequestDelete();
}

useEffect(()=>{
if(dialogRef.current) {
if(showConfirm) dialogRef.current.showModal();
else dialogRef.current.close();
}
}, [showConfirm])

useEffect(()=>{
conv_to_delete && toggleConfirm(true);
}, [conv_to_delete])

return (
<div className="chat">
<Tickets selectChat={selectChat} setHistory={setHistory} history={history} current_chat={chat} />
<Tickets
selectChat={selectChat} current_chat={chat}
setHistory={setHistory} history={history}
deleteHistory={requestDelete}
/>
<Conversation uid={chat.uid} client={chat.client} updateClient={updateChatClient} />
<dialog ref={dialogRef}>
<div>
Delete <strong>{conv_to_delete && conv_to_delete.title}</strong>?
</div>
<div
className="button clickable"
onClick={deleteHistory}
>Yes, Delete</div>
<div
className="button clickable"
onClick={resetRequestDelete}
>No, Go Back</div>
</dialog>
</div>
)
}

0 comments on commit 43bf848

Please sign in to comment.