Skip to content

Commit 43bf848

Browse files
cbh778899cbh778899
committed
add delete session function
Signed-off-by: cbh778899 <[email protected]>
1 parent bf150bc commit 43bf848

File tree

4 files changed

+106
-46
lines changed

4 files changed

+106
-46
lines changed

‎src/components/chat/Conversation.jsx‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -146,48 +146,48 @@ export default function Conversation({ uid, client, updateClient }) {
146146
{
147147
uid ?
148148
<>
149-
<div className="bubbles" ref={bubblesRef}>
150-
{ conversation.map(({role, content}, idx) => {
151-
return (
152-
<ConversationBubble
153-
key={`conversation-history-${uid}-${idx}`}
154-
role={role} content={content}
155-
/>
156-
)
157-
}) }
158-
<ConversationBubble
159-
role={'assistant'} content={pending_message}
160-
hidden={hide_pending} special={true}
161-
/>
162-
</div>
163-
<form className="send-message-form" onSubmit={sendMessage}>
164-
<div className="input-container">
165-
{
166-
chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
167-
<div className="button-container file-upload">
168-
{
169-
upload_file ?
170-
upload_file.type.startsWith("image") ?
171-
<FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
172-
<Paperclip className="button-icon" />
173-
}
174-
<input
175-
type="file" className="clickable"
176-
title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
177-
onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
178-
</div>
179-
}
180-
<input type="text" value={message} onChange={messageOnChange}/>
181-
<div className="button-container">
182-
{
183-
hide_pending ?
184-
<Send className="button-icon animated" /> :
185-
<StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
149+
<div className="bubbles" ref={bubblesRef}>
150+
{ conversation.map(({role, content}, idx) => {
151+
return (
152+
<ConversationBubble
153+
key={`conversation-history-${uid}-${idx}`}
154+
role={role} content={content}
155+
/>
156+
)
157+
}) }
158+
<ConversationBubble
159+
role={'assistant'} content={pending_message}
160+
hidden={hide_pending} special={true}
161+
/>
162+
</div>
163+
<form className="send-message-form" onSubmit={sendMessage}>
164+
<div className="input-container">
165+
{
166+
chat_functions.current && chat_functions.current.platform !== 'Wllama' &&
167+
<div className="button-container file-upload">
168+
{
169+
upload_file ?
170+
upload_file.type.startsWith("image") ?
171+
<FileImageFill className="button-icon highlight" /> : <FileTextFill className="button-icon highlight" />:
172+
<Paperclip className="button-icon" />
186173
}
187-
<input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
174+
<input
175+
type="file" className="clickable"
176+
title={upload_file ? `Append file ${upload_file.name}` : "Select file to append"}
177+
onChange={evt=>setUploadFile(evt.target.files.length ? evt.target.files[0] : null)} />
188178
</div>
179+
}
180+
<input type="text" value={message} onChange={messageOnChange}/>
181+
<div className="button-container">
182+
{
183+
hide_pending ?
184+
<Send className="button-icon animated" /> :
185+
<StopCircleFill className="button-icon clickable" onClick={chat_functions.current.abort} />
186+
}
187+
<input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
189188
</div>
190-
</form>
189+
</div>
190+
</form>
191191
</> :
192192
<div className="no-conversation">Please select a conversation or start a new one.</div>
193193
}

‎src/components/chat/Ticket.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
export default function Ticket({ title, info, selectChat, is_selected }) {
1+
import { XLg } from "react-bootstrap-icons";
2+
3+
export default function Ticket({ title, info, selectChat, is_selected, deleteHistory }) {
4+
25
return (
36
<div
47
className={`ticket clickable${is_selected ? " selected":""}`}
58
onClick={()=>selectChat(info)}
69
>
710
{ title }
11+
<XLg
12+
className="delete-icon clickable"
13+
onClick={evt=>{
14+
evt.stopPropagation();
15+
deleteHistory({ uid: info.uid, title })
16+
}}
17+
/>
818
</div>
919
)
1020
}

‎src/components/chat/Tickets.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import Ticket from "./Ticket";
33
import useIDB from "../../utils/idb";
44
import { genRandomID } from "../../utils/tools";
55

6-
export default function Tickets({selectChat, current_chat, history, setHistory}) {
6+
export default function Tickets({selectChat, current_chat, history, setHistory, deleteHistory}) {
77

88
const idb = useIDB();
99

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

1616
async function startNewConversation() {
@@ -27,7 +27,7 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
2727
const new_conv_info = await idb.getByID('chat-history', conv_id);
2828
new_conv_info &&
2929
setHistory([
30-
new_conv_info,
30+
{...new_conv_info, client: null},
3131
...history
3232
])
3333
selectChat(new_conv_info)
@@ -50,9 +50,10 @@ export default function Tickets({selectChat, current_chat, history, setHistory})
5050
const { title, uid } = elem;
5151
return (
5252
<Ticket
53-
key={`ticket-${title}-${uid}`}
53+
key={`ticket-${uid}`}
5454
title={title} info={elem}
5555
selectChat={selectChat}
56+
deleteHistory={deleteHistory}
5657
is_selected={current_chat.uid && uid === current_chat.uid}
5758
/>
5859
)

‎src/components/chat/index.jsx‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { useState } from "react";
1+
import { useEffect, useRef, useState } from "react";
22
import Tickets from "./Tickets";
33
import Conversation from "./Conversation";
4+
import useIDB from "../../utils/idb";
45

56
export default function Chat() {
67

78
const [chat, selectChat] = useState({});
89
const [history, setHistory] = useState([]);
10+
const idb = useIDB();
11+
const dialogRef = useRef(null);
12+
const [showConfirm, toggleConfirm] = useState(false);
13+
const [conv_to_delete, requestDelete] = useState(null);
914

1015
function updateChatClient(client) {
1116
selectChat({
@@ -19,10 +24,54 @@ export default function Chat() {
1924
setHistory(history_cp);
2025
}
2126

27+
function resetRequestDelete() {
28+
requestDelete(null);
29+
toggleConfirm(false);
30+
}
31+
32+
async function deleteHistory() {
33+
if(!conv_to_delete) return;
34+
35+
const {uid} = conv_to_delete;
36+
await idb.deleteOne("chat-history", [{uid}]);
37+
await idb.deleteAll("messages", [{'history-uid': uid}]);
38+
setHistory(history.filter(e=>e.uid !== uid));
39+
uid === chat.uid && selectChat({});
40+
resetRequestDelete();
41+
}
42+
43+
useEffect(()=>{
44+
if(dialogRef.current) {
45+
if(showConfirm) dialogRef.current.showModal();
46+
else dialogRef.current.close();
47+
}
48+
}, [showConfirm])
49+
50+
useEffect(()=>{
51+
conv_to_delete && toggleConfirm(true);
52+
}, [conv_to_delete])
53+
2254
return (
2355
<div className="chat">
24-
<Tickets selectChat={selectChat} setHistory={setHistory} history={history} current_chat={chat} />
56+
<Tickets
57+
selectChat={selectChat} current_chat={chat}
58+
setHistory={setHistory} history={history}
59+
deleteHistory={requestDelete}
60+
/>
2561
<Conversation uid={chat.uid} client={chat.client} updateClient={updateChatClient} />
62+
<dialog ref={dialogRef}>
63+
<div>
64+
Delete <strong>{conv_to_delete && conv_to_delete.title}</strong>?
65+
</div>
66+
<div
67+
className="button clickable"
68+
onClick={deleteHistory}
69+
>Yes, Delete</div>
70+
<div
71+
className="button clickable"
72+
onClick={resetRequestDelete}
73+
>No, Go Back</div>
74+
</dialog>
2675
</div>
2776
)
2877
}

0 commit comments

Comments
 (0)