botschat 0.1.15 → 0.1.17

package/packages/web/src/components/SessionTabs.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import { useAppState, useAppDispatch } from "../store";
 import { sessionsApi, channelsApi, agentsApi } from "../api";
 import { dlog } from "../debug-log";
+import { useIMEComposition } from "../hooks/useIMEComposition";
 
 // ---------------------------------------------------------------------------
 // Session history — tracks per-channel usage order in localStorage
@@ -88,6 +89,7 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
   const state = useAppState();
   const dispatch = useAppDispatch();
   const [editingId, setEditingId] = useState<string | null>(null);
+  const { onCompositionStart, onCompositionEnd, isIMEActive } = useIMEComposition();
   const [editValue, setEditValue] = useState("");
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const editRef = useRef<HTMLInputElement>(null);
@@ -267,7 +269,7 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
                   onChange={(e) => setEditValue(e.target.value)}
                   onBlur={commitRename}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                    if (e.key === "Enter" && !e.nativeEvent.isComposing && !isIMEActive()) {
                       e.preventDefault();
                       commitRename();
                     }
@@ -275,6 +277,8 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
                       setEditingId(null);
                     }
                   }}
+                  onCompositionStart={onCompositionStart}
+                  onCompositionEnd={onCompositionEnd}
                   className="px-2.5 py-1 text-caption rounded-t-md focus:outline-none"
                   style={{
                     background: "var(--bg-hover)",

package/packages/web/src/components/Sidebar.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { useAppState, useAppDispatch } from "../store";
 import { agentsApi, channelsApi } from "../api";
 import { dlog } from "../debug-log";
+import { useIMEComposition } from "../hooks/useIMEComposition";
 
 export function Sidebar({ onOpenSettings, onNavigate }: { onOpenSettings?: () => void; onNavigate?: () => void } = {}) {
   const state = useAppState();
@@ -9,6 +10,7 @@ export function Sidebar({ onOpenSettings, onNavigate }: { onOpenSettings?: () =>
   const [showCreate, setShowCreate] = useState(false);
   const [newName, setNewName] = useState("");
   const [newDesc, setNewDesc] = useState("");
+  const { onCompositionStart, onCompositionEnd, isIMEActive } = useIMEComposition();
   const [channelsExpanded, setChannelsExpanded] = useState(true);
 
   const handleCreate = async () => {
@@ -189,7 +191,9 @@ export function Sidebar({ onOpenSettings, onNavigate }: { onOpenSettings?: () =>
                   placeholder="Channel name"
                   value={newName}
                   onChange={(e) => setNewName(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && !isIMEActive() && handleCreate()}
+                  onCompositionStart={onCompositionStart}
+                  onCompositionEnd={onCompositionEnd}
                   className="w-full px-2 py-1.5 text-caption text-[--text-sidebar] rounded-sm focus:outline-none placeholder:text-[--text-muted]"
                   style={{ background: "var(--sidebar-hover)", border: "1px solid var(--sidebar-border)" }}
                   autoFocus
@@ -199,7 +203,9 @@ export function Sidebar({ onOpenSettings, onNavigate }: { onOpenSettings?: () =>
                   placeholder="Description (optional)"
                   value={newDesc}
                   onChange={(e) => setNewDesc(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && !isIMEActive() && handleCreate()}
+                  onCompositionStart={onCompositionStart}
+                  onCompositionEnd={onCompositionEnd}
                   className="w-full px-2 py-1.5 text-caption text-[--text-sidebar] rounded-sm focus:outline-none placeholder:text-[--text-muted]"
                   style={{ background: "var(--sidebar-hover)", border: "1px solid var(--sidebar-border)" }}
                 />

package/packages/web/src/components/TaskBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useAppState, useAppDispatch } from "../store";
 import { tasksApi, type Task } from "../api";
+import { useIMEComposition } from "../hooks/useIMEComposition";
 
 const SCHEDULE_PRESETS = [
   { label: "Every 30 min", value: "every 30m" },
@@ -18,6 +19,7 @@ export function TaskBar() {
   const state = useAppState();
   const dispatch = useAppDispatch();
   const [showCreate, setShowCreate] = useState(false);
+  const { onCompositionStart, onCompositionEnd, isIMEActive } = useIMEComposition();
   const [newTaskName, setNewTaskName] = useState("");
   const [newTaskKind, setNewTaskKind] = useState<"adhoc" | "background">("adhoc");
   const [newSchedule, setNewSchedule] = useState("");
@@ -200,7 +202,9 @@ export function TaskBar() {
               placeholder="Task name"
               value={newTaskName}
               onChange={(e) => setNewTaskName(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+              onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && !isIMEActive() && handleCreate()}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
               className="px-2 py-1 text-caption rounded-sm focus:outline-none w-36 placeholder:text-[--text-muted]"
               style={{
                 background: "var(--bg-hover)",

package/packages/web/src/components/ThreadPanel.tsx

@@ -3,9 +3,11 @@ import { useAppState, useAppDispatch, type ChatMessage } from "../store";
 import { messagesApi } from "../api";
 import type { WSMessage } from "../ws";
 import { MessageContent } from "./MessageContent";
+import { E2eService } from "../e2e";
 import { dlog } from "../debug-log";
 import { randomUUID } from "../utils/uuid";
 import { formatMessageTime, formatFullDateTime } from "../utils/time";
+import { useIMEComposition } from "../hooks/useIMEComposition";
 
 /** Simple string hash for action prompt keys (matches MessageContent / ChatWindow) */
 function simpleHash(str: string): string {
@@ -25,6 +27,7 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
   const state = useAppState();
   const dispatch = useAppDispatch();
   const [input, setInput] = useState("");
+  const { onCompositionStart, onCompositionEnd, isIMEActive } = useIMEComposition();
 
   // Load thread message history when a thread is opened
   useEffect(() => {
@@ -33,10 +36,24 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
     dlog.info("Thread", `Loading history for thread ${state.activeThreadId}`);
     messagesApi
       .list(state.user.id, threadSessionKey, state.activeThreadId)
-      .then(({ messages }) => {
+      .then(async ({ messages }) => {
         dlog.info("Thread", `Loaded ${messages.length} thread messages`);
         if (messages.length > 0) {
-          dispatch({ type: "OPEN_THREAD", threadId: state.activeThreadId!, messages });
+          const decrypted = await Promise.all(messages.map(async (m) => {
+            if (m.encrypted && E2eService.hasKey()) {
+              try {
+                const plaintext = await E2eService.decrypt(m.text, m.id);
+                return { ...m, text: plaintext, isEncryptedLocked: false };
+              } catch (err) {
+                dlog.warn("Thread", `Failed to decrypt message ${m.id}`, err);
+                return { ...m, isEncryptedLocked: true };
+              }
+            } else if (m.encrypted) {
+              return { ...m, isEncryptedLocked: true };
+            }
+            return m;
+          }));
+          dispatch({ type: "OPEN_THREAD", threadId: state.activeThreadId!, messages: decrypted });
         }
       })
       .catch((err) => {
@@ -201,6 +218,8 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
                 <MessageContent
                   text={parentMessage.text}
                   mediaUrl={parentMessage.mediaUrl}
+                  messageId={parentMessage.id}
+                  encrypted={!!parentMessage.mediaEncrypted && !!parentMessage.mediaUrl && E2eService.hasKey()}
                   a2ui={parentMessage.a2ui}
                   onAction={handleA2UIAction}
                   onResolveAction={(value, label) => handleResolveAction(parentMessage.id, value, label)}
@@ -259,6 +278,8 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
                   <MessageContent
                     text={msg.text}
                     mediaUrl={msg.mediaUrl}
+                    messageId={msg.id}
+                    encrypted={!!msg.mediaEncrypted && !!msg.mediaUrl && E2eService.hasKey()}
                     a2ui={msg.a2ui}
                     isStreaming={msg.isStreaming}
                     onAction={handleA2UIAction}
@@ -315,11 +336,13 @@ export function ThreadPanel({ sendMessage }: ThreadPanelProps) {
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !isIMEActive()) {
                 e.preventDefault();
                 handleSend();
               }
             }}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
             placeholder="Reply…"
             rows={1}
             className="w-full px-3 py-2 text-body bg-transparent resize-none focus:outline-none placeholder:text-[--text-muted]"

package/packages/web/src/firebase.ts

@@ -60,9 +60,10 @@ function getFirebaseAuth(): Auth {
     app = initializeApp(firebaseConfig);
     auth = getAuth(app);
 
-    // In Capacitor native, WKWebView's IndexedDB can hang Firebase Auth.
+    // In native WKWebViews (Capacitor or macOS), IndexedDB can hang Firebase Auth.
     // Use in-memory persistence to avoid this.
-    if (Capacitor.isNativePlatform()) {
+    const isNative = Capacitor.isNativePlatform() || !!(window as any).__BOTSCHAT_NATIVE__;
+    if (isNative) {
       setPersistence(auth, inMemoryPersistence).catch(() => {});
     }
   }

package/packages/web/src/foreground.ts

@@ -1,18 +1,43 @@
 /**
- * Foreground/background detection — notifies the ConnectionDO via WebSocket
- * so it knows whether to send push notifications.
+ * Foreground/background detection & channel-level focus tracking.
+ *
+ * Notifies the ConnectionDO via WebSocket so it knows whether to send push
+ * notifications and which session the user is currently viewing.
  */
 
 import { Capacitor } from "@capacitor/core";
 import type { BotsChatWSClient } from "./ws";
 import { dlog } from "./debug-log";
 
-export function setupForegroundDetection(
+export interface ForegroundOptions {
+  wsClient: BotsChatWSClient;
+  getActiveSessionKey: () => string | null;
+  onResume?: () => void;
+}
+
+export interface ForegroundHandle {
+  cleanup: () => void;
+  /** Re-send the current foreground/background state. Call after WS auth succeeds. */
+  resend: () => void;
+}
+
+/**
+ * Send a focus.update message when the user switches channels/sessions
+ * while already in the foreground.
+ */
+export function sendFocusUpdate(
   wsClient: BotsChatWSClient,
-  onResume?: () => void,
-): () => void {
+  sessionKey: string | null,
+): void {
+  wsClient.send({ type: "focus.update", sessionKey });
+  dlog.info("Foreground", `Focus updated: ${sessionKey ?? "(none)"}`);
+}
+
+export function setupForegroundDetection(opts: ForegroundOptions): ForegroundHandle {
+  const { wsClient, getActiveSessionKey, onResume } = opts;
+
   const notifyForeground = () => {
-    wsClient.send({ type: "foreground.enter" });
+    wsClient.send({ type: "foreground.enter", sessionKey: getActiveSessionKey() });
     onResume?.();
     dlog.info("Foreground", "Entered foreground");
   };
@@ -24,19 +49,23 @@ export function setupForegroundDetection(
 
   if (Capacitor.isNativePlatform()) {
     let cleanup: (() => void) | null = null;
+    let nativeIsActive = true;
 
     import("@capacitor/app").then(({ App }) => {
       const handle = App.addListener("appStateChange", ({ isActive }) => {
+        nativeIsActive = isActive;
         if (isActive) notifyForeground();
         else notifyBackground();
       });
       cleanup = () => handle.then((h) => h.remove());
     });
 
-    // Report initial foreground state once WS is connected
     notifyForeground();
 
-    return () => cleanup?.();
+    return {
+      cleanup: () => cleanup?.(),
+      resend: () => { if (nativeIsActive) notifyForeground(); else notifyBackground(); },
+    };
   }
 
   // Web: Use Page Visibility API
@@ -49,7 +78,8 @@ export function setupForegroundDetection(
 
   if (!document.hidden) notifyForeground();
 
-  return () => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  return {
+    cleanup: () => document.removeEventListener("visibilitychange", handleVisibilityChange),
+    resend: () => { if (!document.hidden) notifyForeground(); else notifyBackground(); },
   };
 }

package/packages/web/src/hooks/useIMEComposition.ts

@@ -0,0 +1,36 @@
+import { useRef, useCallback } from "react";
+
+/**
+ * Tracks IME composition state to prevent Enter-to-send during
+ * Chinese/Japanese/Korean input confirmation.
+ *
+ * In WebKit/WKWebView, when a user presses Enter to accept an IME candidate,
+ * the event order is: compositionend → keydown(Enter, isComposing=false).
+ * The native `isComposing` flag is already false by the time keydown fires,
+ * so checking it alone is insufficient. This hook keeps a flag active for one
+ * animation frame after compositionend to swallow that trailing Enter.
+ */
+export function useIMEComposition() {
+  const composingRef = useRef(false);
+  const justEndedRef = useRef(false);
+
+  const onCompositionStart = useCallback(() => {
+    composingRef.current = true;
+    justEndedRef.current = false;
+  }, []);
+
+  const onCompositionEnd = useCallback(() => {
+    composingRef.current = false;
+    justEndedRef.current = true;
+    requestAnimationFrame(() => {
+      justEndedRef.current = false;
+    });
+  }, []);
+
+  const isIMEActive = useCallback(
+    () => composingRef.current || justEndedRef.current,
+    [],
+  );
+
+  return { onCompositionStart, onCompositionEnd, isIMEActive } as const;
+}

package/packages/web/src/main.tsx

@@ -34,8 +34,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   </React.StrictMode>,
 );
 
-// Register service worker for PWA support — skip in Capacitor (native has its own caching)
-if (!Capacitor.isNativePlatform() && "serviceWorker" in navigator) {
+// Register service worker for PWA support — skip in native apps (iOS/Android/macOS)
+const isNativePlatform = Capacitor.isNativePlatform() || !!(window as any).__BOTSCHAT_NATIVE__;
+if (!isNativePlatform && "serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker.register("/sw.js").catch(() => {
       // SW registration failed — non-critical, app still works

package/packages/web/src/push.ts

@@ -96,11 +96,96 @@ export async function clearE2eKeyFromSW(): Promise<void> {
   }
 }
 
+// ---- macOS native notification bridge ----
+
+declare global {
+  interface Window {
+    __BOTSCHAT_NATIVE__?: boolean;
+    __BOTSCHAT_PLATFORM__?: string;
+    __BOTSCHAT_NATIVE_NOTIFY__?: (payload: {
+      title: string;
+      body: string;
+      sessionKey?: string;
+    }) => void;
+    __BOTSCHAT_NATIVE_REQUEST_PERMISSION__?: () => void;
+  }
+}
+
+function isMacOSNative(): boolean {
+  return !!(window.__BOTSCHAT_NATIVE__ && window.__BOTSCHAT_PLATFORM__ === "macos");
+}
+
+async function initMacOSPush(): Promise<void> {
+  try {
+    window.__BOTSCHAT_NATIVE_REQUEST_PERMISSION__?.();
+    dlog.info("Push", "macOS native notification permission requested");
+  } catch (err) {
+    dlog.error("Push", "macOS notification init failed", err);
+  }
+}
+
+/**
+ * Show a native macOS notification when a message arrives via WS and
+ * the window is not focused. Call this from the WS message handler.
+ */
+export function notifyIfBackground(msg: {
+  type: string;
+  text?: string;
+  caption?: string;
+  sessionKey?: string;
+  agentName?: string;
+}): void {
+  if (!isMacOSNative()) return;
+  if (!document.hidden && document.hasFocus()) return;
+  if (!window.__BOTSCHAT_NATIVE_NOTIFY__) return;
+
+  let body = "";
+  const title = msg.agentName || "BotsChat";
+
+  if (msg.type === "agent.text" && msg.text) {
+    body = msg.text.length > 200 ? msg.text.slice(0, 200) + "…" : msg.text;
+  } else if (msg.type === "agent.media") {
+    body = msg.caption || "Sent a media file";
+  } else {
+    return;
+  }
+
+  window.__BOTSCHAT_NATIVE_NOTIFY__({ title, body, sessionKey: msg.sessionKey });
+}
+
+// ---- Service Worker message listener (notification click → navigation) ----
+
+function setupSWMessageListener(): void {
+  if (!("serviceWorker" in navigator)) return;
+  navigator.serviceWorker.addEventListener("message", (event) => {
+    if (event.data?.type === "push-nav" && event.data.sessionKey) {
+      dlog.info("Push", `SW postMessage push-nav: ${event.data.sessionKey}`);
+      firePushNav(event.data.sessionKey);
+    }
+  });
+
+  // Also check URL for push_session param (when SW opens a new window)
+  const params = new URLSearchParams(window.location.search);
+  const pushSession = params.get("push_session");
+  if (pushSession) {
+    dlog.info("Push", `URL push_session param: ${pushSession}`);
+    firePushNav(pushSession);
+    // Clean up the URL parameter
+    params.delete("push_session");
+    const clean = params.toString();
+    const newUrl = window.location.pathname + (clean ? "?" + clean : "") + window.location.hash;
+    window.history.replaceState({}, "", newUrl);
+  }
+}
+
 // ---- Push initialization ----
 
 export async function initPushNotifications(): Promise<void> {
   if (initialized) return;
 
+  // Listen for SW notification-click messages (must be before any early return)
+  setupSWMessageListener();
+
   // Sync E2E key so push notifications can be decrypted
   await syncE2eKeyToSW();
 
@@ -109,7 +194,9 @@ export async function initPushNotifications(): Promise<void> {
     syncE2eKeyToSW().catch(() => {});
   });
 
-  if (Capacitor.isNativePlatform()) {
+  if (isMacOSNative()) {
+    await initMacOSPush();
+  } else if (Capacitor.isNativePlatform()) {
     await initNativePush();
   } else {
     await initWebPush();

package/packages/web/src/store.ts

@@ -15,6 +15,10 @@ export type ChatMessage = {
   /** Tracks which action blocks have been resolved, keyed by prompt hash */
   resolvedActions?: Record<string, { value: string; label: string }>;
   isEncryptedLocked?: boolean;
+  /** Whether the message text was E2E encrypted (bitmask from API: bit0=text, bit1=media) */
+  encrypted?: boolean | number;
+  /** Whether the media binary was E2E encrypted (derived from sender + encrypted flag) */
+  mediaEncrypted?: boolean;
 };
 
 export type ActiveView = "messages" | "automations";

package/packages/web/src/ws.ts

@@ -35,10 +35,11 @@ export class BotsChatWSClient {
   connect(): void {
     this.intentionalClose = false;
 
-    // In Capacitor (native app), WebView runs from capacitor:// so we must
-    // use the full production WebSocket URL.
+    // In native apps (Capacitor or macOS), the WebView runs from a custom
+    // scheme so we must use the full production WebSocket URL.
+    const isNative = Capacitor.isNativePlatform() || !!(window as any).__BOTSCHAT_NATIVE__;
     let url: string;
-    if (Capacitor.isNativePlatform()) {
+    if (isNative) {
       url = `wss://console.botschat.app/api/ws/${this.opts.userId}/${this.opts.sessionId}`;
     } else {
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";

package/packages/web/dist/assets/index-CbCpFrA9.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/web-DIeOUVhn.js","assets/index-CvbTpaza.js","assets/index-cm_3YFsA.css"])))=>i.map(i=>d[i]);
-import{r as o,f as t}from"./index-CvbTpaza.js";const n=o("SocialLogin",{web:()=>t(()=>import("./web-DIeOUVhn.js"),__vite__mapDeps([0,1,2])).then(e=>new e.SocialLoginWeb)});export{n as SocialLogin};

package/packages/web/dist/assets/index-Ct0m11C8.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/web-Dft_LGIH.js","assets/index-CvbTpaza.js","assets/index-cm_3YFsA.css"])))=>i.map(i=>d[i]);
-import{r as p,f as r}from"./index-CvbTpaza.js";const o=p("App",{web:()=>r(()=>import("./web-Dft_LGIH.js"),__vite__mapDeps([0,1,2])).then(e=>new e.AppWeb)});export{o as App};