botschat 0.1.10 → 0.1.13

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

@@ -1,11 +1,10 @@
 import React, { useState, useCallback } from "react";
-import { useAppState, useAppDispatch, type ActiveView } from "../store";
+import { useAppState, useAppDispatch } from "../store";
 import { setToken, setRefreshToken } from "../api";
 import type { WSMessage } from "../ws";
 import { Sidebar } from "./Sidebar";
 import { ChatWindow } from "./ChatWindow";
 import { ThreadPanel } from "./ThreadPanel";
-import { JobList } from "./JobList";
 import { CronSidebar } from "./CronSidebar";
 import { CronDetail } from "./CronDetail";
 import { ModelSelect } from "./ModelSelect";
@@ -13,11 +12,14 @@ import { ConnectionSettings } from "./ConnectionSettings";
 import { E2ESettings } from "./E2ESettings";
 import { dlog } from "../debug-log";
 
+/**
+ * Mobile screen stack — unified home replaces separate channel-list / cron-list.
+ * No bottom tab bar; Channels + Automations are both visible on the home screen.
+ */
 type MobileScreen =
-  | "channel-list"
+  | "home"
   | "chat"
   | "thread"
-  | "cron-list"
   | "cron-detail";
 
 type MobileLayoutProps = {
@@ -44,52 +46,19 @@ export function MobileLayout({
   const state = useAppState();
   const dispatch = useAppDispatch();
 
-  // Mobile navigation state — stack-based
+  // Mobile navigation state — stack-based, unified home screen
   const [screen, setScreen] = useState<MobileScreen>(() => {
-    if (state.activeView === "automations") return "cron-list";
     if (state.selectedAgentId && state.selectedSessionKey) return "chat";
-    return "channel-list";
+    return "home";
   });
 
   const [showUserMenu, setShowUserMenu] = useState(false);
 
-  const activeTab = state.activeView;
-
-  const setActiveTab = useCallback((view: ActiveView) => {
-    dispatch({ type: "SET_ACTIVE_VIEW", view });
-    if (view === "messages") {
-      if (state.selectedAgentId && state.selectedSessionKey) {
-        setScreen("chat");
-      } else {
-        setScreen("channel-list");
-      }
-    } else {
-      if (state.selectedCronTaskId) {
-        setScreen("cron-detail");
-      } else {
-        setScreen("cron-list");
-      }
-    }
-  }, [dispatch, state.selectedAgentId, state.selectedSessionKey, state.selectedCronTaskId]);
-
-  // Navigate to chat when a channel is selected (via Sidebar's internal dispatch)
-  // We listen for selectedAgentId changes to auto-navigate
-  const prevAgentIdRef = React.useRef(state.selectedAgentId);
-  React.useEffect(() => {
-    if (state.selectedAgentId && state.selectedAgentId !== prevAgentIdRef.current && screen === "channel-list") {
-      setScreen("chat");
-    }
-    prevAgentIdRef.current = state.selectedAgentId;
-  }, [state.selectedAgentId, screen]);
-
-  // Navigate to cron detail when a cron task is selected
-  const prevCronTaskIdRef = React.useRef(state.selectedCronTaskId);
-  React.useEffect(() => {
-    if (state.selectedCronTaskId && state.selectedCronTaskId !== prevCronTaskIdRef.current && screen === "cron-list") {
-      setScreen("cron-detail");
-    }
-    prevCronTaskIdRef.current = state.selectedCronTaskId;
-  }, [state.selectedCronTaskId, screen]);
+  // Navigation to chat / cron-detail is handled explicitly by the onNavigate
+  // callbacks passed to Sidebar and CronSidebar. We intentionally do NOT
+  // auto-navigate when selectedAgentId / selectedCronTaskId change, because
+  // App.tsx auto-selects an agent on mount — that would navigate to an empty
+  // chat screen before sessions have loaded (issue #4a / #4b).
 
   // Navigate to thread when thread opens
   React.useEffect(() => {
@@ -119,14 +88,14 @@ export function MobileLayout({
   const goBack = useCallback(() => {
     switch (screen) {
       case "chat":
-        setScreen("channel-list");
+        setScreen("home");
         break;
       case "thread":
         dispatch({ type: "CLOSE_THREAD" });
         setScreen("chat");
         break;
       case "cron-detail":
-        setScreen("cron-list");
+        setScreen("home");
         break;
       default:
         break;
@@ -136,7 +105,7 @@ export function MobileLayout({
   // Determine the header title
   const getHeaderTitle = (): string => {
     switch (screen) {
-      case "channel-list":
+      case "home":
         return "BotsChat";
       case "chat": {
         const agent = state.agents.find((a) => a.id === state.selectedAgentId);
@@ -144,8 +113,6 @@ export function MobileLayout({
       }
       case "thread":
         return "Thread";
-      case "cron-list":
-        return "Automations";
       case "cron-detail": {
         const task = state.cronTasks.find((t) => t.id === state.selectedCronTaskId);
         return task?.name ?? "Task Detail";
@@ -155,18 +122,22 @@ export function MobileLayout({
     }
   };
 
-  const showBackButton = screen !== "channel-list" && screen !== "cron-list";
+  const showBackButton = screen !== "home";
 
   return (
     <div
-      className="flex flex-col h-screen"
-      style={{ background: "var(--bg-surface)" }}
+      className="flex flex-col"
+      style={{
+        height: "calc(100vh - var(--keyboard-height, 0px))",
+        background: "var(--bg-surface)",
+        transition: "height 0.2s ease-out",
+      }}
     >
       {/* ---- Top nav bar (44px + safe area for standalone PWA) ---- */}
       <div
         className="flex items-center justify-between px-4 flex-shrink-0"
         style={{
-          height: 44,
+          minHeight: "calc(44px + env(safe-area-inset-top, 0px))",
           paddingTop: "env(safe-area-inset-top, 0px)",
           background: "var(--bg-primary)",
           borderBottom: "1px solid var(--border)",
@@ -287,9 +258,11 @@ export function MobileLayout({
 
       {/* ---- Screen content ---- */}
       <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-        {screen === "channel-list" && (
+        {/* Unified home: Channels + Automations in one scrollable list */}
+        {screen === "home" && (
           <div className="flex-1 min-h-0 overflow-y-auto" style={{ background: "var(--bg-secondary)" }}>
-            <Sidebar onOpenSettings={onOpenSettings} />
+            <Sidebar onOpenSettings={onOpenSettings} onNavigate={() => setScreen("chat")} />
+            <CronSidebar onNavigate={() => setScreen("cron-detail")} />
           </div>
         )}
 
@@ -305,12 +278,6 @@ export function MobileLayout({
           </div>
         )}
 
-        {screen === "cron-list" && (
-          <div className="flex-1 min-h-0 overflow-y-auto" style={{ background: "var(--bg-secondary)" }}>
-            <CronSidebar />
-          </div>
-        )}
-
         {screen === "cron-detail" && (
           <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
             <CronDetail />
@@ -318,38 +285,6 @@ export function MobileLayout({
         )}
       </div>
 
-      {/* ---- Bottom tab bar (56px) ---- */}
-      <div
-        className="flex items-stretch flex-shrink-0"
-        style={{
-          height: 56,
-          background: "var(--bg-primary)",
-          borderTop: "1px solid var(--border)",
-          paddingBottom: "env(safe-area-inset-bottom, 0px)",
-        }}
-      >
-        <TabButton
-          label="Messages"
-          active={activeTab === "messages"}
-          onClick={() => setActiveTab("messages")}
-          icon={
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
-            </svg>
-          }
-        />
-        <TabButton
-          label="Automations"
-          active={activeTab === "automations"}
-          onClick={() => setActiveTab("automations")}
-          icon={
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          }
-        />
-      </div>
-
       {/* Settings modal */}
       {showSettings && (
         <MobileSettingsModal
@@ -480,28 +415,3 @@ function MobileSettingsModal({
     </div>
   );
 }
-
-function TabButton({
-  label,
-  active,
-  onClick,
-  icon,
-}: {
-  label: string;
-  active: boolean;
-  onClick: () => void;
-  icon: React.ReactNode;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className="flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors"
-      style={{
-        color: active ? "var(--text-link)" : "var(--text-muted)",
-      }}
-    >
-      {icon}
-      <span className="text-[10px] leading-tight">{label}</span>
-    </button>
-  );
-}

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

@@ -7,6 +7,7 @@ import { dlog } from "../debug-log";
 // Session history — tracks per-channel usage order in localStorage
 // ---------------------------------------------------------------------------
 const SESSION_HISTORY_KEY = "botschat:sessionHistory";
+const SESSION_COUNTER_KEY = "botschat:sessionCounter";
 
 /** Get the ordered list of recently-used session IDs for a channel. */
 function getSessionHistory(channelId: string): string[] {
@@ -32,6 +33,43 @@ function recordSessionUsage(channelId: string, sessionId: string) {
   } catch { /* ignore */ }
 }
 
+// ---------------------------------------------------------------------------
+// Session counter — per-channel high-water-mark for monotonic session naming
+// ---------------------------------------------------------------------------
+
+/** Extract the numeric suffix from a "Session N" name, or return 0. */
+function extractSessionNumber(name: string): number {
+  const match = name.match(/^Session\s+(\d+)$/);
+  return match ? parseInt(match[1], 10) : 0;
+}
+
+/** Get the next session number for a channel (monotonically increasing). */
+function getNextSessionNumber(channelId: string, existingSessions: { name: string }[]): number {
+  // High-water-mark from localStorage
+  let hwm = 0;
+  try {
+    const all = JSON.parse(localStorage.getItem(SESSION_COUNTER_KEY) || "{}");
+    hwm = typeof all[channelId] === "number" ? all[channelId] : 0;
+  } catch { /* ignore */ }
+
+  // Max number from existing session names
+  const maxExisting = existingSessions.reduce(
+    (max, s) => Math.max(max, extractSessionNumber(s.name)),
+    0,
+  );
+
+  const next = Math.max(hwm, maxExisting) + 1;
+
+  // Persist the new high-water-mark
+  try {
+    const all = JSON.parse(localStorage.getItem(SESSION_COUNTER_KEY) || "{}");
+    all[channelId] = next;
+    localStorage.setItem(SESSION_COUNTER_KEY, JSON.stringify(all));
+  } catch { /* ignore */ }
+
+  return next;
+}
+
 /** Remove a session from the history for a channel. */
 function removeSessionFromHistory(channelId: string, sessionId: string) {
   try {
@@ -125,7 +163,8 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
         return;
       }
 
-      const session = await sessionsApi.create(effectiveChannelId);
+      const nextNum = getNextSessionNumber(effectiveChannelId, sessions);
+      const session = await sessionsApi.create(effectiveChannelId, `Session ${nextNum}`);
       dlog.info("Session", `Created session: ${session.name} (${session.id})`);
       dispatch({ type: "ADD_SESSION", session });
       recordSessionUsage(effectiveChannelId, session.id);
@@ -143,7 +182,7 @@ export function SessionTabs({ channelId }: SessionTabsProps) {
     } catch (err) {
       dlog.error("Session", `Failed to create session: ${err}`);
     }
-  }, [channelId, dispatch]);
+  }, [channelId, sessions, dispatch]);
 
   const handleDelete = useCallback(
     async (sessionId: string) => {

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

@@ -3,7 +3,7 @@ import { useAppState, useAppDispatch } from "../store";
 import { agentsApi, channelsApi } from "../api";
 import { dlog } from "../debug-log";
 
-export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}) {
+export function Sidebar({ onOpenSettings, onNavigate }: { onOpenSettings?: () => void; onNavigate?: () => void } = {}) {
   const state = useAppState();
   const dispatch = useAppDispatch();
   const [showCreate, setShowCreate] = useState(false);
@@ -29,6 +29,7 @@ export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}
           sessionKey: created.sessionKey,
         });
         try { localStorage.setItem("botschat_last_agent", created.id); } catch { /* ignore */ }
+        onNavigate?.();
       }
       setShowCreate(false);
       setNewName("");
@@ -41,11 +42,22 @@ export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
 
   const handleSelectAgent = (agentId: string, sessionKey: string) => {
-    // Skip if already selected – avoids clearing messages for no reason
-    if (state.selectedAgentId === agentId) return;
+    // Ensure activeView is "messages" — on mobile there's no IconRail, so
+    // if the user was last viewing automations, session loading would be
+    // blocked by the `isMessagesView` guard in App.tsx.
+    if (state.activeView !== "messages") {
+      dispatch({ type: "SET_ACTIVE_VIEW", view: "messages" });
+    }
+    // On mobile, always call onNavigate so tapping the already-selected
+    // channel navigates back to the chat view.
+    if (state.selectedAgentId === agentId) {
+      onNavigate?.();
+      return;
+    }
     const agent = state.agents.find((a) => a.id === agentId);
     dlog.info("Channel", `Selected channel: ${agent?.name ?? agentId} (session=${sessionKey})`);
     dispatch({ type: "SELECT_AGENT", agentId, sessionKey });
+    onNavigate?.();
     // Persist last selected channel so it survives page refresh
     try { localStorage.setItem("botschat_last_agent", agentId); } catch { /* ignore */ }
   };
@@ -80,7 +92,7 @@ export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}
 
   return (
     <div
-      className="flex flex-col h-full"
+      className="flex flex-col"
       style={{ background: "var(--bg-secondary)" }}
     >
       {/* Workspace Switcher */}
@@ -126,6 +138,11 @@ export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}
           label="Channels"
           expanded={channelsExpanded}
           onToggle={() => setChannelsExpanded(!channelsExpanded)}
+          onAdd={(e) => {
+            e.stopPropagation();
+            if (!channelsExpanded) setChannelsExpanded(true);
+            setShowCreate(!showCreate);
+          }}
         />
         {channelsExpanded && (
           <div>
@@ -164,57 +181,47 @@ export function Sidebar({ onOpenSettings }: { onOpenSettings?: () => void } = {}
                 Loading channels…
               </div>
             )}
+            {/* Inline create channel form */}
+            {showCreate && (
+              <div className="px-4 py-2 space-y-2">
+                <input
+                  type="text"
+                  placeholder="Channel name"
+                  value={newName}
+                  onChange={(e) => setNewName(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+                  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
+                />
+                <input
+                  type="text"
+                  placeholder="Description (optional)"
+                  value={newDesc}
+                  onChange={(e) => setNewDesc(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
+                  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)" }}
+                />
+                <div className="flex gap-2">
+                  <button
+                    onClick={handleCreate}
+                    className="flex-1 px-3 py-1.5 text-caption bg-[--bg-active] text-white rounded-sm font-bold hover:brightness-110"
+                  >
+                    Create
+                  </button>
+                  <button
+                    onClick={() => setShowCreate(false)}
+                    className="px-3 py-1.5 text-caption text-[--text-muted] hover:text-[--text-sidebar]"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
         )}
       </div>
-
-      {/* Create channel */}
-      {showCreate ? (
-        <div className="p-3 space-y-2" style={{ borderTop: "1px solid var(--sidebar-border)" }}>
-          <input
-            type="text"
-            placeholder="Channel name"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && !e.nativeEvent.isComposing && handleCreate()}
-            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
-          />
-          <input
-            type="text"
-            placeholder="Description (optional)"
-            value={newDesc}
-            onChange={(e) => setNewDesc(e.target.value)}
-            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)" }}
-          />
-          <div className="flex gap-2">
-            <button
-              onClick={handleCreate}
-              className="flex-1 px-3 py-1.5 text-caption bg-[--bg-active] text-white rounded-sm font-bold hover:brightness-110"
-            >
-              Create
-            </button>
-            <button
-              onClick={() => setShowCreate(false)}
-              className="px-3 py-1.5 text-caption text-[--text-muted] hover:text-[--text-sidebar]"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      ) : (
-        <div className="p-3" style={{ borderTop: "1px solid var(--sidebar-border)" }}>
-          <button
-            onClick={() => setShowCreate(true)}
-            className="w-full px-3 py-1.5 text-caption text-[--text-sidebar] hover:text-[--text-sidebar-active] rounded-sm border border-dashed transition-colors"
-            style={{ borderColor: "var(--sidebar-divider)" }}
-          >
-            + New channel
-          </button>
-        </div>
-      )}
     </div>
   );
 }
@@ -223,27 +230,42 @@ function SectionHeader({
   label,
   expanded,
   onToggle,
+  onAdd,
 }: {
   label: string;
   expanded: boolean;
   onToggle: () => void;
+  onAdd?: (e: React.MouseEvent) => void;
 }) {
   return (
-    <button
-      onClick={onToggle}
-      className="w-full flex items-center gap-1 px-4 py-1.5 text-tiny uppercase tracking-wider text-[--text-sidebar] hover:text-[--text-sidebar-active] transition-colors"
-    >
-      <svg
-        className={`w-3 h-3 transition-transform ${expanded ? "rotate-0" : "-rotate-90"}`}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        strokeWidth={2}
+    <div className="w-full flex items-center px-4 py-1.5">
+      <button
+        onClick={onToggle}
+        className="flex items-center gap-1 text-tiny uppercase tracking-wider text-[--text-sidebar] hover:text-[--text-sidebar-active] transition-colors"
       >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-      </svg>
-      {label}
-    </button>
+        <svg
+          className={`w-3 h-3 transition-transform ${expanded ? "rotate-0" : "-rotate-90"}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+        {label}
+      </button>
+      {onAdd && (
+        <button
+          onClick={onAdd}
+          className="ml-auto p-0.5 rounded transition-colors text-[--text-sidebar] hover:text-[--text-sidebar-active] hover:bg-[--sidebar-hover]"
+          title={`New ${label.toLowerCase().replace(/s$/, "")}`}
+        >
+          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+        </button>
+      )}
+    </div>
   );
 }
 

package/packages/web/src/e2e.ts

@@ -1,4 +1,4 @@
-import { deriveKey, encryptText, decryptText, toBase64, fromBase64 } from "e2e-crypto";
+import { deriveKey, encryptText, decryptText, encryptBytes, decryptBytes, toBase64, fromBase64 } from "e2e-crypto";
 
 const STORAGE_KEY = "botschat_e2e_pwd_cache";
 const KEY_CACHE_KEY = "botschat_e2e_key_cache"; // base64-encoded derived key
@@ -108,12 +108,13 @@ export const E2eService = {
 
   /**
    * Encrypt text using the current key.
-   * Generates a random messageId (UUID) as contextId/nonce source.
+   * If contextId is provided, uses it as the nonce source (for preserving
+   * existing messageIds). Otherwise generates a random UUID.
    * Returns { ciphertext: base64, messageId: string }
    */
-  async encrypt(text: string): Promise<{ ciphertext: string; messageId: string }> {
+  async encrypt(text: string, contextId?: string): Promise<{ ciphertext: string; messageId: string }> {
     if (!currentKey) throw new Error("E2E key not set");
-    const messageId = crypto.randomUUID();
+    const messageId = contextId || crypto.randomUUID();
     const encrypted = await encryptText(currentKey, text, messageId);
     return { ciphertext: toBase64(encrypted), messageId };
   },
@@ -134,10 +135,30 @@ export const E2eService = {
     return currentPassword;
   },
 
+  /**
+   * Encrypt raw binary data (e.g., an image file).
+   * Returns { encrypted: Uint8Array, contextId: string }.
+   * The encrypted data is the same length as the input (AES-CTR, no padding).
+   */
+  async encryptMedia(data: Uint8Array, contextId?: string): Promise<{ encrypted: Uint8Array; contextId: string }> {
+    if (!currentKey) throw new Error("E2E key not set");
+    const cid = contextId || crypto.randomUUID();
+    const encrypted = await encryptBytes(currentKey, data, cid);
+    return { encrypted, contextId: cid };
+  },
+
+  /**
+   * Decrypt raw binary data (e.g., an encrypted image).
+   */
+  async decryptMedia(encrypted: Uint8Array, contextId: string): Promise<Uint8Array> {
+    if (!currentKey) throw new Error("E2E key not set");
+    return decryptBytes(currentKey, encrypted, contextId);
+  },
+
   /**
    * Decrypt bytes (base64) -> Uint8Array.
    */
-  async decryptBytes(ciphertextBase64: string, messageId: string): Promise<Uint8Array> {
+  async decryptBytesLegacy(ciphertextBase64: string, messageId: string): Promise<Uint8Array> {
     if (!currentKey) throw new Error("E2E key not set");
     const ciphertext = fromBase64(ciphertextBase64);
     const plainStr = await decryptText(currentKey, ciphertext, messageId);