@wrongstack/webui 0.5.7 → 0.6.1

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/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 q = get().queue;
735
- if (q.length === 0) return null;
736
- const [next, ...rest] = q;
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.eventType === "warning" ? "\u26A0 " : "";
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">${escape(m.content)}</pre>
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 = (e) => {
2493
- if (slashSuggestions.length === 0 && !atMention && promptHistory.length > 0) {
2494
- if (e.key === "ArrowUp") {
2495
- const ta = e.currentTarget;
2496
- const beforeCursor = ta.value.slice(0, ta.selectionStart);
2497
- if (historyIdx >= 0 || beforeCursor.indexOf("\n") === -1) {
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 = Math.min(promptHistory.length - 1, historyIdx + 1);
2500
- setHistoryIdx(next);
2501
- const text = promptHistory[next] ?? "";
2502
- setInput(text);
2503
- requestAnimationFrame(() => {
2504
- const el = textareaRef.current;
2505
- if (el) {
2506
- el.style.height = "auto";
2507
- el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
2508
- el.setSelectionRange(text.length, text.length);
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 (e.key === "ArrowDown" && historyIdx >= 0) {
2515
- e.preventDefault();
2516
- const next = historyIdx - 1;
2517
- if (next < 0) {
2518
- setHistoryIdx(-1);
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
- return;
2534
- }
2535
- }
2536
- if (slashSuggestions.length > 0) {
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
- return;
2555
- }
2556
- if (e.key === "Enter" && !e.shiftKey) {
2557
- const pick = slashSuggestions[slashIndex];
2558
- if (pick && pick.name !== input.toLowerCase().trim()) {
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 === "Escape") {
2570
+ if (e.key === "Enter" && !e.shiftKey) {
2566
2571
  e.preventDefault();
2567
- setInput("");
2568
- return;
2572
+ handleSubmit(e);
2569
2573
  }
2570
- }
2571
- if (e.key === "Enter" && !e.shiftKey) {
2572
- e.preventDefault();
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, listProviders, listSavedProviders]);
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
- ws.switchModel?.(provider, modelId);
6212
- setOperationStatus({ success: true, message: `Switching to ${provider} / ${modelId}\u2026` });
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, provider]
6216
+ [setModel, ws]
6215
6217
  );
6216
6218
  const handleAddKey = useCallback4(
6217
6219
  (providerId) => {