blob: 7bec9843efe913115356e439dad5428fcce091ca (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<script lang="ts">
export type CompactNowResult =
| { readonly ok: true; readonly messagesSummarized: number; readonly messagesKept: number }
| { readonly ok: false; readonly error: string };
export type SaveCompactPercentResult =
| { readonly ok: true; readonly percent: number }
| { readonly ok: false; readonly error: string };
let {
percent,
canCompact,
compactNow,
savePercent,
}: {
/** The conversation's auto-compact percent (0-100), or null when not yet fetched. 0 = disabled. */
percent: number | null;
/** Whether a real conversation is focused (a draft has nothing to compact). */
canCompact: boolean;
compactNow: () => Promise<CompactNowResult | null>;
savePercent: (percent: number) => Promise<SaveCompactPercentResult | null>;
} = $props();
const DEFAULT_PERCENT = 85;
let compacting = $state(false);
let compactError = $state<string | null>(null);
let compactResult = $state<{ summarized: number; kept: number } | null>(null);
let percentInput = $state("");
let savingPercent = $state(false);
let percentError = $state<string | null>(null);
let percentSaved = $state(false);
// Sync the input from the prop when it changes (focus switch / initial load).
let lastPercent = $state<number | null>(null);
$effect(() => {
if (percent !== lastPercent) {
lastPercent = percent;
percentInput = percent !== null ? String(percent) : "";
percentError = null;
percentSaved = false;
}
});
const percentLabel = $derived(
percent == null
? "Loading…"
: percent === 0
? "Disabled (manual only)"
: percent === DEFAULT_PERCENT
? `${percent}% (default)`
: `${percent}%`,
);
async function handleCompact() {
if (compacting || !canCompact) return;
compacting = true;
compactError = null;
compactResult = null;
const result = await compactNow();
compacting = false;
if (result === null) return;
if (result.ok) {
compactResult = { summarized: result.messagesSummarized, kept: result.messagesKept };
} else {
compactError = result.error;
}
}
async function handleSavePercent() {
const value = Number.parseInt(percentInput, 10);
if (Number.isNaN(value) || value < 0 || value > 100) {
percentError = "Must be 0-100";
return;
}
savingPercent = true;
percentError = null;
percentSaved = false;
const result = await savePercent(value);
savingPercent = false;
if (result === null) return;
if (result.ok) {
percentSaved = true;
} else {
percentError = result.error;
}
}
</script>
<div class="flex flex-col gap-3">
<!-- Manual compaction -->
<section class="flex flex-col gap-1">
<span class="text-xs font-semibold uppercase opacity-60">Manual compaction</span>
<button
type="button"
class="btn btn-sm btn-outline"
disabled={!canCompact || compacting}
onclick={handleCompact}
>
{#if compacting}
<span class="loading loading-spinner loading-xs"></span>
Compacting…
{:else}
Compact now
{/if}
</button>
{#if !canCompact}
<p class="text-xs opacity-60">Open or start a conversation to compact its history.</p>
{:else if compactError}
<p class="text-xs text-error">{compactError}</p>
{:else if compactResult}
<p class="text-xs text-success">
Compacted — {compactResult.summarized} messages summarized, {compactResult.kept} kept.
</p>
{:else}
<p class="text-xs opacity-50">
Summarizes old messages into a system summary + retains the most recent messages.
</p>
{/if}
</section>
<!-- Auto-compact percent -->
<section class="flex flex-col gap-1">
<span class="text-xs font-semibold uppercase opacity-60">Auto-compact percent</span>
<div class="flex items-center gap-2">
<input
type="number"
class="input input-bordered input-sm w-24"
min="0"
max="100"
placeholder={String(DEFAULT_PERCENT)}
value={percentInput}
disabled={savingPercent}
onchange={handleSavePercent}
aria-label="Compact percent (0-100)"
/>
<span class="text-xs opacity-60">%</span>
{#if savingPercent}
<span class="loading loading-spinner loading-xs"></span>
{/if}
</div>
<p class="text-xs opacity-50">
Current: {percentLabel}
<br />
0 disables auto-compact. Default is {DEFAULT_PERCENT}%.
</p>
{#if percentError}
<p class="text-xs text-error">{percentError}</p>
{:else if percentSaved}
<p class="text-xs text-success">Saved.</p>
{/if}
</section>
</div>
|
