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

refactor: update UI management to index-based approach

Browse Source
This commit is contained in:
Bo26fhmC5M
2025-01-15 19:56:07 +09:00
parent 3e234dcb15
commit d59cc1a29c
1 changed files with 148 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
src/lib/Others/HypaV3Modal.svelte
View File

@@ -10,78 +10,94 @@
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
import { alertConfirm } from "../../ts/alert";
import { DBState, alertStore, selectedCharID } from "src/ts/stores.svelte";
import {
type SerializableHypaV3Data,
summarize,
} from "src/ts/process/memory/hypav3";
import { summarize } from "src/ts/process/memory/hypav3";
import { translateHTML } from "src/ts/translator/translator";
import PersonaSettings from "../Setting/Pages/PersonaSettings.svelte";
type Summary = SerializableHypaV3Data["summaries"][number];
interface ExtendedSummary extends Summary {
state: {
isTranslating: boolean;
translation?: string | null;
isRerolling: boolean;
rerolledText?: string | null;
isRerolledTranslating: boolean;
rerolledTranslation?: string | null;
};
interface SummaryUI {
isTranslating: boolean;
translation: string | null;
isRerolling: boolean;
rerolledText: string | null;
isRerolledTranslating: boolean;
rerolledTranslation: string | null;
}
interface HypaV3ModalState {
summaries: ExtendedSummary[];
expandedMessage: {
summaryChatMemos: string[];
selectedChatMemo: string;
isTranslating: boolean;
translation?: string | null;
} | null;
interface ExpandedMessageUI {
summaryIndex: number;
selectedChatMemo: string;
isTranslating: boolean;
translation?: string | null;
}
// Initialize modal state
let modalState = $state<HypaV3ModalState>({
summaries: DBState.db.characters[$selectedCharID].chats[
const hypaV3DataState = $state(
DBState.db.characters[$selectedCharID].chats[
DBState.db.characters[$selectedCharID].chatPage
].hypaV3Data.summaries.map((s) => {
const summary = s as ExtendedSummary;
].hypaV3Data
);
const summaryUIStates = $state<SummaryUI[]>(
hypaV3DataState.summaries.map(() => ({
isTranslating: false,
translation: null,
isRerolling: false,
rerolledText: null,
isRerolledTranslating: false,
rerolledTranslation: null,
}))
);
let expandedMessageUIState = $state<ExpandedMessageUI | null>(null);
summary.state = {
isTranslating: false,
translation: null,
isRerolling: false,
rerolledText: null,
isRerolledTranslating: false,
rerolledTranslation: null,
};
return summary;
}),
expandedMessage: null,
$effect(() => {
// Detects changes in all nested properties including summaries
hypaV3DataState.summaries;
expandedMessageUIState = null;
});
function getMessageFromChatMemo(
chatMemo: string | null
): { role: string; data: string } | null {
const char = DBState.db.characters[$selectedCharID];
const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
const firstMessage =
chat.fmIndex === -1
? char.firstMessage
: char.alternateGreetings?.[chat.fmIndex ?? 0];
const targetMessage =
chatMemo == null
? { role: "char", data: firstMessage }
: chat.message.find((m) => m.chatId === chatMemo);
return targetMessage;
}
async function toggleTranslate(
summary: ExtendedSummary,
summaryIndex: number,
regenerate?: boolean
): Promise<void> {
if (summary.state.isTranslating) return;
const summaryUIState = summaryUIStates[summaryIndex];
if (summary.state.translation) {
summary.state.translation = null;
if (summaryUIState.isTranslating) return;
if (summaryUIState.translation) {
summaryUIState.translation = null;
return;
}
summary.state.isTranslating = true;
summary.state.translation = "Loading...";
summaryUIState.isTranslating = true;
summaryUIState.translation = "Loading...";
const result = await translate(summary.text, regenerate);
const result = await translate(
hypaV3DataState.summaries[summaryIndex].text,
regenerate
);
summary.state.translation = result;
summary.state.isTranslating = false;
summaryUIState.translation = result;
summaryUIState.isTranslating = false;
}
function isRerollable(summary: ExtendedSummary): boolean {
function isRerollable(summaryIndex: number): boolean {
const summary = hypaV3DataState.summaries[summaryIndex];
for (const chatMemo of summary.chatMemos) {
if (typeof chatMemo === "string") {
const char = DBState.db.characters[$selectedCharID];
@@ -93,154 +109,121 @@
}
}
}
return true;
}
async function toggleReroll(summary: ExtendedSummary): Promise<void> {
if (summary.state.isRerolling) return;
if (!isRerollable(summary)) return;
async function toggleReroll(summaryIndex: number): Promise<void> {
const summaryUIState = summaryUIStates[summaryIndex];
summary.state.isRerolling = true;
summary.state.rerolledText = "Loading...";
if (summaryUIState.isRerolling) return;
if (!isRerollable(summaryIndex)) return;
summaryUIState.isRerolling = true;
summaryUIState.rerolledText = "Loading...";
try {
const char = DBState.db.characters[$selectedCharID];
const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
const firstMessage =
chat.fmIndex === -1
? char.firstMessage
: char.alternateGreetings?.[chat.fmIndex ?? 0];
const summary = hypaV3DataState.summaries[summaryIndex];
const toSummarize = summary.chatMemos.map((chatMemo) => {
if (chatMemo == null) {
return {
role: "assistant",
data: firstMessage,
};
}
const message = getMessageFromChatMemo(chatMemo);
const msg = chat.message.find((m) => m.chatId === chatMemo);
return msg
? {
role: msg.role === "char" ? "assistant" : msg.role,
data: msg.data,
}
: null;
return {
...message,
role: message.role === "char" ? "assistant" : message.role,
};
});
const stringifiedChats = toSummarize
.map((m) => `${m.role}: ${m.data}`)
.join("\n");
const summarizeResult = await summarize(stringifiedChats);
if (summarizeResult.success) {
summary.state.rerolledText = summarizeResult.data;
summaryUIState.rerolledText = summarizeResult.data;
}
} catch (error) {
summary.state.rerolledText = "Reroll failed";
summaryUIState.rerolledText = "Reroll failed";
} finally {
summary.state.isRerolling = false;
summaryUIState.isRerolling = false;
}
}
async function toggleTranslateRerolled(
summary: ExtendedSummary,
summaryIndex: number,
regenerate?: boolean
): Promise<void> {
if (summary.state.isRerolledTranslating) return;
const summaryUIState = summaryUIStates[summaryIndex];
if (summary.state.rerolledTranslation) {
summary.state.rerolledTranslation = null;
if (summaryUIState.isRerolledTranslating) return;
if (summaryUIState.rerolledTranslation) {
summaryUIState.rerolledTranslation = null;
return;
}
if (!summary.state.rerolledText) return;
if (!summaryUIState.rerolledText) return;
summary.state.isRerolledTranslating = true;
summary.state.rerolledTranslation = "Loading...";
summaryUIState.isRerolledTranslating = true;
summaryUIState.rerolledTranslation = "Loading...";
const result = await translate(summary.state.rerolledText, regenerate);
const result = await translate(summaryUIState.rerolledText, regenerate);
summary.state.rerolledTranslation = result;
summary.state.isRerolledTranslating = false;
summaryUIState.rerolledTranslation = result;
summaryUIState.isRerolledTranslating = false;
}
async function toggleTranslateExpandedMessage(
regenerate?: boolean
): Promise<void> {
if (!modalState.expandedMessage || modalState.expandedMessage.isTranslating)
return;
if (!expandedMessageUIState || expandedMessageUIState.isTranslating) return;
if (modalState.expandedMessage.translation) {
modalState.expandedMessage.translation = null;
if (expandedMessageUIState.translation) {
expandedMessageUIState.translation = null;
return;
}
const messageData = getMessageData();
const message = getMessageFromChatMemo(
expandedMessageUIState.selectedChatMemo
);
if (!messageData) return;
if (!message) return;
modalState.expandedMessage.isTranslating = true;
modalState.expandedMessage.translation = "Loading...";
expandedMessageUIState.isTranslating = true;
expandedMessageUIState.translation = "Loading...";
const result = await translate(messageData.data, regenerate);
const result = await translate(message.data, regenerate);
modalState.expandedMessage.translation = result;
modalState.expandedMessage.isTranslating = false;
expandedMessageUIState.translation = result;
expandedMessageUIState.isTranslating = false;
}
function isMessageExpanded(
summary: ExtendedSummary,
summaryIndex: number,
chatMemo: string | null
): boolean {
if (!expandedMessageUIState) return false;
const summary = hypaV3DataState.summaries[summaryIndex];
return (
modalState.expandedMessage?.summaryChatMemos === summary.chatMemos &&
modalState.expandedMessage?.selectedChatMemo === chatMemo
expandedMessageUIState.summaryIndex === summaryIndex &&
expandedMessageUIState.selectedChatMemo === chatMemo
);
}
function toggleExpandMessage(
summary: ExtendedSummary,
summaryIndex: number,
chatMemo: string | null
): void {
modalState.expandedMessage = isMessageExpanded(summary, chatMemo)
expandedMessageUIState = isMessageExpanded(summaryIndex, chatMemo)
? null
: {
summaryChatMemos: summary.chatMemos,
summaryIndex,
selectedChatMemo: chatMemo,
isTranslating: false,
translation: null,
};
}
function getMessageData(): { role: string; data: string } | null {
const char = DBState.db.characters[$selectedCharID];
const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
const firstMessage =
chat.fmIndex === -1
? char.firstMessage
: char.alternateGreetings?.[chat.fmIndex ?? 0];
const targetMessage =
modalState.expandedMessage?.selectedChatMemo == null
? { role: "char", data: firstMessage }
: chat.message.find(
(m) => m.chatId === modalState.expandedMessage!.selectedChatMemo
);
if (!targetMessage) {
return null;
}
return {
...targetMessage,
role: targetMessage.role === "char" ? char.name : targetMessage.role,
};
}
async function translate(
text: string,
regenerate?: boolean
@@ -318,7 +301,7 @@
<div class="fixed inset-0 z-50 bg-black/50 p-4">
<div class="h-full w-full flex justify-center">
<div
class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl {modalState
class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl {hypaV3DataState
.summaries.length === 0
? 'h-48'
: 'max-h-full'}"
@@ -370,7 +353,7 @@
<!-- Summaries List -->
<div class="flex flex-col gap-3 w-full overflow-y-auto">
{#each modalState.summaries as summary, i}
{#each hypaV3DataState.summaries as summary, i}
<div
class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
>
@@ -382,8 +365,8 @@
<button
class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
use:handleDualAction={{
onMainAction: () => toggleTranslate(summary, false),
onAlternativeAction: () => toggleTranslate(summary, true),
onMainAction: () => toggleTranslate(i, false),
onAlternativeAction: () => toggleTranslate(i, true),
}}
>
<LanguagesIcon size={16} />
@@ -404,8 +387,8 @@
<!-- Reroll Button -->
<button
class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
onclick={async () => await toggleReroll(summary)}
disabled={!isRerollable(summary)}
onclick={async () => await toggleReroll(i)}
disabled={!isRerollable(i)}
>
<RefreshCw size={16} />
</button>
@@ -419,7 +402,7 @@
/>
<!-- Translation (if exists) -->
{#if summary.state.translation}
{#if summaryUIStates[i].translation}
<div class="mt-4">
<span class="text-sm text-textcolor2 mb-2 block"
>Translation</span
@@ -427,13 +410,13 @@
<div
class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
>
{summary.state.translation}
{summaryUIStates[i].translation}
</div>
</div>
{/if}
<!-- Rerolled Summary (if exists) -->
{#if summary.state.rerolledText}
{#if summaryUIStates[i].rerolledText}
<div class="mt-4">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-textcolor2">Rerolled Summary</span>
@@ -442,10 +425,9 @@
<button
class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
use:handleDualAction={{
onMainAction: () =>
toggleTranslateRerolled(summary, false),
onMainAction: () => toggleTranslateRerolled(i, false),
onAlternativeAction: () =>
toggleTranslateRerolled(summary, true),
toggleTranslateRerolled(i, true),
}}
>
<LanguagesIcon size={16} />
@@ -455,8 +437,8 @@
<button
class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
onclick={() => {
summary.state.rerolledText = null;
summary.state.rerolledTranslation = null;
summaryUIStates[i].rerolledText = null;
summaryUIStates[i].rerolledTranslation = null;
}}
>
<XIcon size={16} />
@@ -466,9 +448,9 @@
<button
class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
onclick={() => {
summary.text = summary.state.rerolledText!;
summary.state.rerolledText = null;
summary.state.rerolledTranslation = null;
summary.text = summaryUIStates[i].rerolledText!;
summaryUIStates[i].rerolledText = null;
summaryUIStates[i].rerolledTranslation = null;
}}
>
<CheckIcon size={16} />
@@ -476,12 +458,12 @@
</div>
</div>
<TextAreaInput
bind:value={summary.state.rerolledText}
bind:value={summaryUIStates[i].rerolledText}
className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
/>
<!-- Rerolled Translation (if exists) -->
{#if summary.state.rerolledTranslation}
{#if summaryUIStates[i].rerolledTranslation}
<div class="mt-4">
<span class="text-sm text-textcolor2 mb-2 block"
>Rerolled Translation</span
@@ -489,7 +471,7 @@
<div
class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
>
{summary.state.rerolledTranslation}
{summaryUIStates[i].rerolledTranslation}
</div>
</div>
{/if}
@@ -520,12 +502,12 @@
{#each summary.chatMemos as chatMemo}
<button
class="text-xs px-3 py-1.5 bg-zinc-900 text-zinc-300 rounded-full hover:bg-zinc-800 transition-colors {isMessageExpanded(
summary,
i,
chatMemo
)
? 'ring-1 ring-blue-500'
: ''}"
onclick={() => toggleExpandMessage(summary, chatMemo)}
onclick={() => toggleExpandMessage(i, chatMemo)}
>
{chatMemo == null ? "First Message" : chatMemo}
</button>
@@ -533,26 +515,28 @@
</div>
<!-- Selected Message Content -->
{#if modalState.expandedMessage?.summaryChatMemos === summary.chatMemos}
{@const messageData = getMessageData()}
{#if expandedMessageUIState?.summaryIndex === i}
{@const message = getMessageFromChatMemo(
expandedMessageUIState.selectedChatMemo
)}
<div class="mt-4">
{#if messageData}
{#if message}
<!-- Role -->
<div class="text-sm text-textcolor2 mb-2 block">
{messageData.role}:
{message.role}'s Message
</div>
<!-- Content -->
<div
class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
>
{messageData.data}
{message.data}
</div>
{:else}
<div class="text-sm text-red-500">Message not found</div>
{/if}
<!-- Message Translation -->
{#if modalState.expandedMessage.translation}
{#if expandedMessageUIState.translation}
<div class="mt-4">
<span class="text-sm text-textcolor2 mb-2 block"
>Translation</span
@@ -560,7 +544,7 @@
<div
class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
>
{modalState.expandedMessage.translation}
{expandedMessageUIState.translation}
</div>
</div>
{/if}
@@ -570,7 +554,7 @@
</div>
{/each}
{#if modalState.summaries.length === 0}
{#if hypaV3DataState.summaries.length === 0}
<span class="text-textcolor2 text-center p-4">No summaries yet</span>
{/if}
</div>