@wrongstack/webui 0.5.6 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index-CFyVAbSB.js +94 -0
- package/dist/index.html +1 -1
- package/dist/index.js +89 -87
- package/dist/index.js.map +1 -1
- package/dist/server/entry.js +15 -1
- package/dist/server/entry.js.map +1 -1
- package/dist/server/index.js +15 -1
- package/dist/server/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/assets/index-3Lo5wUfj.js +0 -94
package/dist/index.js
CHANGED
|
@@ -731,9 +731,9 @@ var useChatStore = create2()(
|
|
|
731
731
|
},
|
|
732
732
|
enqueue: (text) => set((state) => ({ queue: [...state.queue, text] })),
|
|
733
733
|
dequeue: () => {
|
|
734
|
-
const
|
|
735
|
-
if (
|
|
736
|
-
const [next, ...rest] =
|
|
734
|
+
const { queue } = get();
|
|
735
|
+
if (queue.length === 0) return null;
|
|
736
|
+
const [next, ...rest] = queue;
|
|
737
737
|
set({ queue: rest });
|
|
738
738
|
return next;
|
|
739
739
|
},
|
|
@@ -1165,18 +1165,19 @@ function installHandlers(ws) {
|
|
|
1165
1165
|
});
|
|
1166
1166
|
on("tool.progress", (msg) => {
|
|
1167
1167
|
const payload = msg.payload;
|
|
1168
|
-
const text = (payload.text ?? "").trim();
|
|
1168
|
+
const text = (payload.event?.text ?? "").trim();
|
|
1169
1169
|
if (!text) return;
|
|
1170
1170
|
const messages = useChatStore.getState().messages;
|
|
1171
1171
|
const owner = messages.find((m) => m.toolUseId === payload.id);
|
|
1172
1172
|
if (!owner) return;
|
|
1173
|
-
const prefix = payload.
|
|
1173
|
+
const prefix = payload.event?.type === "warning" ? "\u26A0 " : "";
|
|
1174
1174
|
useChatStore.getState().appendToolProgress(owner.id, prefix + text);
|
|
1175
1175
|
});
|
|
1176
1176
|
on("tool.executed", (msg) => {
|
|
1177
1177
|
const payload = msg.payload;
|
|
1178
1178
|
const { messages, currentToolId } = useChatStore.getState();
|
|
1179
1179
|
const owner = payload.id ? messages.find((m) => m.toolUseId === payload.id) : currentToolId ? messages.find((m) => m.id === currentToolId) : void 0;
|
|
1180
|
+
if (owner?.toolResult !== void 0) return;
|
|
1180
1181
|
if (owner) {
|
|
1181
1182
|
useChatStore.getState().setToolResult(owner.id, payload.output ?? "", payload.ok);
|
|
1182
1183
|
useChatStore.getState().updateMessage(owner.id, { toolDurationMs: payload.durationMs });
|
|
@@ -1451,7 +1452,6 @@ function useWebSocketBootstrap() {
|
|
|
1451
1452
|
return () => {
|
|
1452
1453
|
off();
|
|
1453
1454
|
offStatus();
|
|
1454
|
-
installed.current = false;
|
|
1455
1455
|
};
|
|
1456
1456
|
}, [autoConnect, wsUrl, setWsStatus]);
|
|
1457
1457
|
}
|
|
@@ -1965,8 +1965,6 @@ function renderGroupedList(filtered, index, dispatch, setIndex) {
|
|
|
1965
1965
|
}
|
|
1966
1966
|
function downloadChatAsMarkdown() {
|
|
1967
1967
|
const messages = useChatStore.getState().messages;
|
|
1968
|
-
const session = useChatStore.getState();
|
|
1969
|
-
void session;
|
|
1970
1968
|
const lines = [];
|
|
1971
1969
|
const now = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[:T]/g, "-");
|
|
1972
1970
|
lines.push(`# WrongStack chat export`);
|
|
@@ -2033,7 +2031,7 @@ function downloadChatAsHtml() {
|
|
|
2033
2031
|
return `
|
|
2034
2032
|
<section class="bubble ${cls}">
|
|
2035
2033
|
<header><span class="icon">${icon}</span><strong>${role}</strong></header>
|
|
2036
|
-
<pre class="content">${
|
|
2034
|
+
<pre class="content">${escapeHtml(m.content)}</pre>
|
|
2037
2035
|
</section>`;
|
|
2038
2036
|
});
|
|
2039
2037
|
const html = `<!doctype html>
|
|
@@ -2489,90 +2487,93 @@ function ChatInput() {
|
|
|
2489
2487
|
}
|
|
2490
2488
|
}
|
|
2491
2489
|
}, [sendAbort, setLoading]);
|
|
2492
|
-
const handleKeyDown = (
|
|
2493
|
-
|
|
2494
|
-
if (
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2490
|
+
const handleKeyDown = useCallback2(
|
|
2491
|
+
(e) => {
|
|
2492
|
+
if (slashSuggestions.length === 0 && !atMention && promptHistory.length > 0) {
|
|
2493
|
+
if (e.key === "ArrowUp") {
|
|
2494
|
+
const ta = e.currentTarget;
|
|
2495
|
+
const beforeCursor = ta.value.slice(0, ta.selectionStart);
|
|
2496
|
+
if (historyIdx >= 0 || beforeCursor.indexOf("\n") === -1) {
|
|
2497
|
+
e.preventDefault();
|
|
2498
|
+
const next = Math.min(promptHistory.length - 1, historyIdx + 1);
|
|
2499
|
+
setHistoryIdx(next);
|
|
2500
|
+
const text = promptHistory[next] ?? "";
|
|
2501
|
+
setInput(text);
|
|
2502
|
+
requestAnimationFrame(() => {
|
|
2503
|
+
const el = textareaRef.current;
|
|
2504
|
+
if (el) {
|
|
2505
|
+
el.style.height = "auto";
|
|
2506
|
+
el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
|
|
2507
|
+
el.setSelectionRange(text.length, text.length);
|
|
2508
|
+
}
|
|
2509
|
+
});
|
|
2510
|
+
return;
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
if (e.key === "ArrowDown" && historyIdx >= 0) {
|
|
2498
2514
|
e.preventDefault();
|
|
2499
|
-
const next =
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
el
|
|
2509
|
-
|
|
2510
|
-
|
|
2515
|
+
const next = historyIdx - 1;
|
|
2516
|
+
if (next < 0) {
|
|
2517
|
+
setHistoryIdx(-1);
|
|
2518
|
+
setInput("");
|
|
2519
|
+
} else {
|
|
2520
|
+
setHistoryIdx(next);
|
|
2521
|
+
const text = promptHistory[next] ?? "";
|
|
2522
|
+
setInput(text);
|
|
2523
|
+
requestAnimationFrame(() => {
|
|
2524
|
+
const el = textareaRef.current;
|
|
2525
|
+
if (el) {
|
|
2526
|
+
el.style.height = "auto";
|
|
2527
|
+
el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
|
|
2528
|
+
el.setSelectionRange(text.length, text.length);
|
|
2529
|
+
}
|
|
2530
|
+
});
|
|
2531
|
+
}
|
|
2511
2532
|
return;
|
|
2512
2533
|
}
|
|
2513
2534
|
}
|
|
2514
|
-
if (
|
|
2515
|
-
e.
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
setInput("");
|
|
2520
|
-
} else {
|
|
2521
|
-
setHistoryIdx(next);
|
|
2522
|
-
const text = promptHistory[next] ?? "";
|
|
2523
|
-
setInput(text);
|
|
2524
|
-
requestAnimationFrame(() => {
|
|
2525
|
-
const el = textareaRef.current;
|
|
2526
|
-
if (el) {
|
|
2527
|
-
el.style.height = "auto";
|
|
2528
|
-
el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
|
|
2529
|
-
el.setSelectionRange(text.length, text.length);
|
|
2530
|
-
}
|
|
2531
|
-
});
|
|
2535
|
+
if (slashSuggestions.length > 0) {
|
|
2536
|
+
if (e.key === "ArrowDown") {
|
|
2537
|
+
e.preventDefault();
|
|
2538
|
+
setSlashIndex((i) => (i + 1) % slashSuggestions.length);
|
|
2539
|
+
return;
|
|
2532
2540
|
}
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
if (e.key === "ArrowDown") {
|
|
2538
|
-
e.preventDefault();
|
|
2539
|
-
setSlashIndex((i) => (i + 1) % slashSuggestions.length);
|
|
2540
|
-
return;
|
|
2541
|
-
}
|
|
2542
|
-
if (e.key === "ArrowUp") {
|
|
2543
|
-
e.preventDefault();
|
|
2544
|
-
setSlashIndex((i) => (i - 1 + slashSuggestions.length) % slashSuggestions.length);
|
|
2545
|
-
return;
|
|
2546
|
-
}
|
|
2547
|
-
if (e.key === "Tab") {
|
|
2548
|
-
e.preventDefault();
|
|
2549
|
-
const pick = slashSuggestions[slashIndex];
|
|
2550
|
-
if (pick) {
|
|
2551
|
-
setInput(pick.name + " ");
|
|
2552
|
-
setSlashIndex(0);
|
|
2541
|
+
if (e.key === "ArrowUp") {
|
|
2542
|
+
e.preventDefault();
|
|
2543
|
+
setSlashIndex((i) => (i - 1 + slashSuggestions.length) % slashSuggestions.length);
|
|
2544
|
+
return;
|
|
2553
2545
|
}
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2546
|
+
if (e.key === "Tab") {
|
|
2547
|
+
e.preventDefault();
|
|
2548
|
+
const pick = slashSuggestions[slashIndex];
|
|
2549
|
+
if (pick) {
|
|
2550
|
+
setInput(pick.name + " ");
|
|
2551
|
+
setSlashIndex(0);
|
|
2552
|
+
}
|
|
2553
|
+
return;
|
|
2554
|
+
}
|
|
2555
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
2556
|
+
const pick = slashSuggestions[slashIndex];
|
|
2557
|
+
if (pick && pick.name !== input.toLowerCase().trim()) {
|
|
2558
|
+
e.preventDefault();
|
|
2559
|
+
setInput("");
|
|
2560
|
+
runSlashCommand(pick.name);
|
|
2561
|
+
return;
|
|
2562
|
+
}
|
|
2563
|
+
}
|
|
2564
|
+
if (e.key === "Escape") {
|
|
2559
2565
|
e.preventDefault();
|
|
2560
2566
|
setInput("");
|
|
2561
|
-
runSlashCommand(pick.name);
|
|
2562
2567
|
return;
|
|
2563
2568
|
}
|
|
2564
2569
|
}
|
|
2565
|
-
if (e.key === "
|
|
2570
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
2566
2571
|
e.preventDefault();
|
|
2567
|
-
|
|
2568
|
-
return;
|
|
2572
|
+
handleSubmit(e);
|
|
2569
2573
|
}
|
|
2570
|
-
}
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
handleSubmit(e);
|
|
2574
|
-
}
|
|
2575
|
-
};
|
|
2574
|
+
},
|
|
2575
|
+
[slashSuggestions, atMention, promptHistory, historyIdx, setInput, setHistoryIdx, setSlashIndex, slashIndex, input, handleSubmit]
|
|
2576
|
+
);
|
|
2576
2577
|
const adjustTextareaHeight = () => {
|
|
2577
2578
|
const textarea = textareaRef.current;
|
|
2578
2579
|
if (textarea) {
|
|
@@ -6176,7 +6177,7 @@ function SettingsPanel() {
|
|
|
6176
6177
|
const payload = msg.payload;
|
|
6177
6178
|
setOperationStatus(payload);
|
|
6178
6179
|
setTimeout(() => setOperationStatus(null), 3e3);
|
|
6179
|
-
listSavedProviders
|
|
6180
|
+
wsClient.listSavedProviders();
|
|
6180
6181
|
}
|
|
6181
6182
|
};
|
|
6182
6183
|
if (!wsConnected || !wsClient) return;
|
|
@@ -6186,15 +6187,15 @@ function SettingsPanel() {
|
|
|
6186
6187
|
const off4 = wsClient.on("key.operation_result", handleKeyOperationResult);
|
|
6187
6188
|
setIsLoadingCatalog(true);
|
|
6188
6189
|
setIsLoadingSaved(true);
|
|
6189
|
-
listProviders
|
|
6190
|
-
listSavedProviders
|
|
6190
|
+
wsClient.listProviders();
|
|
6191
|
+
wsClient.listSavedProviders();
|
|
6191
6192
|
return () => {
|
|
6192
6193
|
off1?.();
|
|
6193
6194
|
off2?.();
|
|
6194
6195
|
off3?.();
|
|
6195
6196
|
off4?.();
|
|
6196
6197
|
};
|
|
6197
|
-
}, [wsConnected, wsClient
|
|
6198
|
+
}, [wsConnected, wsClient]);
|
|
6198
6199
|
const handleProviderSelect = useCallback4(
|
|
6199
6200
|
(providerId) => {
|
|
6200
6201
|
setProvider(providerId);
|
|
@@ -6208,10 +6209,11 @@ function SettingsPanel() {
|
|
|
6208
6209
|
const handleModelSelect = useCallback4(
|
|
6209
6210
|
(modelId) => {
|
|
6210
6211
|
setModel(modelId);
|
|
6211
|
-
|
|
6212
|
-
|
|
6212
|
+
const currentProvider = useConfigStore.getState().provider;
|
|
6213
|
+
ws.switchModel?.(currentProvider, modelId);
|
|
6214
|
+
setOperationStatus({ success: true, message: `Switching to ${currentProvider} / ${modelId}\u2026` });
|
|
6213
6215
|
},
|
|
6214
|
-
[setModel, ws
|
|
6216
|
+
[setModel, ws]
|
|
6215
6217
|
);
|
|
6216
6218
|
const handleAddKey = useCallback4(
|
|
6217
6219
|
(providerId) => {
|