mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add expandable chat memo in HypaV3 Data modal

Browse Source
This commit is contained in:
Bo26fhmC5M
2025-01-13 22:33:27 +09:00
parent 4176a647a5
commit a7c3141cc0
1 changed files with 59 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/lib/Others/AlertComp.svelte
View File

@@ -69,7 +69,11 @@
onclick onclick
}:Props = $props() }:Props = $props()
let hypaV3Resummarizing = $state(false) let hypaV3IsResummarizing = $state(false)
let hypaV3ExpandedChatMemo = $state<{summaryChatMemos: string[], summaryChatMemo: string}>({
summaryChatMemos: [],
summaryChatMemo: ""
})
</script> </script>
<svelte:window onmessage={async (e) => { <svelte:window onmessage={async (e) => {
@@ -325,19 +329,24 @@
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col w-full max-w-3xl {DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries.length === 0 ? "h-48" : "max-h-full"}"> <div class="bg-darkbg p-4 break-any rounded-md flex flex-col w-full max-w-3xl {DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries.length === 0 ? "h-48" : "max-h-full"}">
<div class="flex justify-between items-center w-full mb-4"> <div class="flex justify-between items-center w-full mb-4">
<h1 class="text-xl font-bold">HypaV3 Data</h1> <h1 class="text-xl font-bold">HypaV3 Data</h1>
<!-- Reset Button -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- Reset Button -->
<button class="p-2 hover:text-red-500 transition-colors" onclick={async () => { <button class="p-2 hover:text-red-500 transition-colors" onclick={async () => {
const confirmed = await alertConfirm("This action cannot be undone. Do you want to reset HypaV3 data?") let confirmed = await alertConfirm("This action cannot be undone. Do you want to reset HypaV3 data?")
if (confirmed) {
confirmed = await alertConfirm("This action is irreversible. Do you really, really want to reset HypaV3 data?")
if (confirmed) { if (confirmed) {
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data = { DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data = {
summaries: [] summaries: []
} }
} }
}
}}> }}>
<Trash2Icon size={24}/> <Trash2Icon size={24}/>
</button> </button>
<!-- Close Button -->
<button class="p-2 hover:text-red-500 transition-colors" onclick={() => { <button class="p-2 hover:text-red-500 transition-colors" onclick={() => {
alertStore.set({ alertStore.set({
type: "none", type: "none",
@@ -351,14 +360,15 @@
<div class="flex flex-col gap-4 w-full overflow-y-auto"> <div class="flex flex-col gap-4 w-full overflow-y-auto">
{#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries as summary, i} {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries as summary, i}
<div class="flex flex-col p-4 rounded-md border-darkborderc border bg-bgcolor"> <div class="flex flex-col p-4 rounded-md border-darkborderc border bg-bgcolor">
<!-- Summary Text --> <!-- Summary Area -->
<div class="mb-4"> <div class="mb-4">
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<span class="text-sm text-textcolor2">Summary #{i + 1}</span> <span class="text-sm text-textcolor2">Summary #{i + 1}</span>
<!-- Resummarize Button -->
<button <button
class="p-1 hover:text-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" class="p-1 hover:text-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onclick={async () => { onclick={async () => {
hypaV3Resummarizing = true hypaV3IsResummarizing = true
try { try {
const char = DBState.db.characters[$selectedCharID] const char = DBState.db.characters[$selectedCharID]
@@ -387,14 +397,15 @@
summary.text = summarizeResult.data summary.text = summarizeResult.data
} }
} finally { } finally {
hypaV3Resummarizing = false hypaV3IsResummarizing = false
} }
}} }}
disabled={hypaV3Resummarizing} disabled={hypaV3IsResummarizing}
> >
<RefreshCw size={16}/> <RefreshCw size={16}/>
</button> </button>
</div> </div>
<!-- Editable Summary -->
<TextAreaInput <TextAreaInput
bind:value={summary.text} bind:value={summary.text}
className="bg-darkbg" className="bg-darkbg"
@@ -406,20 +417,45 @@
<span class="text-sm text-textcolor2 mb-2 block"> <span class="text-sm text-textcolor2 mb-2 block">
Connected Messages ({summary.chatMemos.length}) Connected Messages ({summary.chatMemos.length})
</span> </span>
<div class="flex flex-col gap-2">
<!-- Message ID -->
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
{#each summary.chatMemos as chatMemo} {#each summary.chatMemos as chatMemo}
<div class="text-xs px-2 py-1 bg-darkbg rounded-full text-textcolor2 hover:bg-opacity-80 cursor-help" <button
title={(() => { class="text-xs px-2 py-1 bg-darkbg rounded-full text-textcolor2 hover:bg-opacity-80 cursor-pointer {
hypaV3ExpandedChatMemo.summaryChatMemos === summary.chatMemos && hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo ? "ring-1 ring-blue-500" : ""
}"
onclick={() => {
hypaV3ExpandedChatMemo = hypaV3ExpandedChatMemo.summaryChatMemos === summary.chatMemos && hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo
? { summaryChatMemos: [], summaryChatMemo: "" }
: { summaryChatMemos: summary.chatMemos, summaryChatMemo: chatMemo }
}}
>
{chatMemo == null ? "First Message" : chatMemo}
</button>
{/each}
</div>
<!-- Message Content Area -->
{#if hypaV3ExpandedChatMemo.summaryChatMemos === summary.chatMemos && hypaV3ExpandedChatMemo.summaryChatMemo !== ""}
<div class="text-sm bg-darkbg/50 rounded border border-darkborderc">
<div class="p-2 max-h-48 overflow-y-auto">
{(() => {
const char = DBState.db.characters[$selectedCharID] const char = DBState.db.characters[$selectedCharID]
const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage] const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage]
const firstMessage = chat.fmIndex === -1 ? char.firstMessage : char.alternateGreetings?.[chat.fmIndex ?? 0] const firstMessage = chat.fmIndex === -1 ? char.firstMessage : char.alternateGreetings?.[chat.fmIndex ?? 0]
const message = chatMemo == null ? firstMessage : chat.message.find(m => m.chatId === chatMemo)?.data const targetMessage = hypaV3ExpandedChatMemo.summaryChatMemo == null ? { role: "char", data: firstMessage } : chat.message.find(m => m.chatId === hypaV3ExpandedChatMemo.summaryChatMemo)
return message ? (message.length > 100 ? message.slice(0, 100).trim() + "..." : message.trim()) : "Message not found"
if (targetMessage) {
const displayRole = targetMessage.role === "char" ? char.name : targetMessage.role
return `${displayRole}: ${targetMessage.data}`
}
return "Message not found"
})()} })()}
>
{chatMemo == null ? "First message" : chatMemo}
</div> </div>
{/each} </div>
{/if}
</div> </div>
</div> </div>
</div> </div>