botschat 0.1.4 → 0.1.7

package/packages/web/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer, useEffect, useCallback, useRef, useState } from "react";
+import { Group, Panel, useDefaultLayout } from "react-resizable-panels";
 import {
   appReducer,
   initialState,
@@ -8,7 +9,7 @@ import {
   type AppState,
   type ActiveView,
 } from "./store";
-import { getToken, setToken, agentsApi, channelsApi, tasksApi, jobsApi, authApi, messagesApi, modelsApi, meApi, sessionsApi, type ModelInfo } from "./api";
+import { getToken, setToken, setRefreshToken, agentsApi, channelsApi, tasksApi, jobsApi, authApi, messagesApi, modelsApi, meApi, sessionsApi, type ModelInfo } from "./api";
 import { ModelSelect } from "./components/ModelSelect";
 import { BotsChatWSClient, type WSMessage } from "./ws";
 import { IconRail } from "./components/IconRail";
@@ -18,10 +19,17 @@ import { ThreadPanel } from "./components/ThreadPanel";
 import { JobList } from "./components/JobList";
 import { LoginPage } from "./components/LoginPage";
 import { OnboardingPage } from "./components/OnboardingPage";
+import { ConnectionSettings } from "./components/ConnectionSettings";
+import { E2ESettings } from "./components/E2ESettings";
 import { DebugLogPanel } from "./components/DebugLogPanel";
 import { CronSidebar } from "./components/CronSidebar";
 import { CronDetail } from "./components/CronDetail";
+import { ResizeHandle } from "./components/ResizeHandle";
+import { useIsMobile } from "./hooks/useIsMobile";
+import { MobileLayout } from "./components/MobileLayout";
 import { dlog } from "./debug-log";
+import { E2eService } from "./e2e";
+import { gtagPageView } from "./analytics";
 
 export default function App() {
   const [state, dispatch] = useReducer(appReducer, initialState, (init): AppState => {
@@ -36,8 +44,18 @@ export default function App() {
   });
   const wsClientRef = useRef<BotsChatWSClient | null>(null);
   const handleWSMessageRef = useRef<(msg: WSMessage) => void>(() => {});
+  const creatingGeneralRef = useRef(false);
 
   const [showSettings, setShowSettings] = useState(false);
+  const [settingsTab, setSettingsTab] = useState<"general" | "connection" | "security">("general");
+
+  // Track whether the initial channels fetch has completed (prevents onboarding flash)
+  const [channelsLoadedOnce, setChannelsLoadedOnce] = useState(false);
+
+  // Responsive layout hooks (must be called unconditionally)
+  const isMobile = useIsMobile();
+  const mainLayout = useDefaultLayout({ id: "botschat-main" });
+  const contentLayout = useDefaultLayout({ id: "botschat-content" });
 
   // Onboarding: show setup page for new users who haven't connected OpenClaw yet.
   // Once dismissed (skip or connected), we remember it for this session.
@@ -60,6 +78,9 @@ export default function App() {
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
     localStorage.setItem("botschat_theme", theme);
+    // Sync PWA theme-color meta tag with current theme
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute("content", theme === "dark" ? "#1A1D21" : "#FFFFFF");
   }, [theme]);
 
   // Persist active view (messages / automations)
@@ -67,6 +88,11 @@ export default function App() {
     localStorage.setItem("botschat_active_view", state.activeView);
   }, [state.activeView]);
 
+  // Google Analytics: track virtual page views for SPA tabs
+  useEffect(() => {
+    gtagPageView(state.activeView);
+  }, [state.activeView]);
+
   // Persist selected cron task for automations view
   useEffect(() => {
     if (state.selectedCronTaskId) {
@@ -98,13 +124,12 @@ export default function App() {
         .then((user) => {
           dlog.info("Auth", `Logged in as ${user.email} (${user.id})`);
           dispatch({ type: "SET_USER", user });
-          if (user.settings?.defaultModel) {
-            dispatch({ type: "SET_DEFAULT_MODEL", model: user.settings.defaultModel });
-          }
+          // defaultModel comes from plugin via connection.status, not from user.settings
         })
         .catch((err) => {
           dlog.warn("Auth", `Auto-login failed: ${err}`);
           setToken(null);
+          setRefreshToken(null);
         });
     }
   }, []);
@@ -154,6 +179,7 @@ export default function App() {
       channelsApi.list().then(({ channels }) => {
         dlog.info("Channels", `Loaded ${channels.length} channels`, channels.map((c) => ({ id: c.id, name: c.name })));
         dispatch({ type: "SET_CHANNELS", channels });
+        setChannelsLoadedOnce(true);
       });
     }
   }, [state.user]);
@@ -263,12 +289,48 @@ export default function App() {
       }).catch((err) => {
         dlog.error("Sessions", `Failed to load sessions: ${err}`);
       });
+    } else if (agent?.isDefault && !creatingGeneralRef.current && onboardingDismissed) {
+      // Default agent has no channelId yet — auto-create the "General" channel
+      // (which also creates "Session 1") so the user sees a chat immediately.
+      // Gated by onboardingDismissed to avoid flashing the onboarding page away.
+      dlog.info("Sessions", "Default agent has no channel — auto-creating General channel");
+      creatingGeneralRef.current = true;
+      dispatch({ type: "SET_TASKS", tasks: [] });
+      dispatch({ type: "SELECT_TASK", taskId: null });
+      dispatch({ type: "SET_SESSIONS", sessions: [] });
+
+      channelsApi
+        .create({ name: "General", openclawAgentId: "main" })
+        .then(async (channel) => {
+          dlog.info("Sessions", `General channel created: ${channel.id}`);
+          // Reload agents and channels so the default agent picks up the new channelId
+          const [{ agents: freshAgents }, { channels: freshChannels }] = await Promise.all([
+            agentsApi.list(),
+            channelsApi.list(),
+          ]);
+          dispatch({ type: "SET_AGENTS", agents: freshAgents });
+          dispatch({ type: "SET_CHANNELS", channels: freshChannels });
+          // Channel creation auto-creates "Session 1" — load and select it
+          const { sessions: newSessions } = await sessionsApi.list(channel.id);
+          dispatch({ type: "SET_SESSIONS", sessions: newSessions });
+          if (newSessions.length > 0) {
+            dispatch({
+              type: "SELECT_SESSION",
+              sessionId: newSessions[0].id,
+              sessionKey: newSessions[0].sessionKey,
+            });
+          }
+        })
+        .catch((err) => {
+          dlog.error("Sessions", `Failed to auto-create General channel: ${err}`);
+          creatingGeneralRef.current = false;
+        });
     } else {
       dispatch({ type: "SET_TASKS", tasks: [] });
       dispatch({ type: "SELECT_TASK", taskId: null });
       dispatch({ type: "SET_SESSIONS", sessions: [] });
     }
-  }, [state.selectedAgentId, selectedAgentChannelId, isMessagesView]);
+  }, [state.selectedAgentId, selectedAgentChannelId, isMessagesView, onboardingDismissed]);
 
   // ---- Load jobs when a background task is selected ----
   useEffect(() => {
@@ -305,12 +367,29 @@ export default function App() {
     let stale = false;
     messagesApi
       .list(state.user.id, state.selectedSessionKey)
-      .then(({ messages, replyCounts }) => {
+      .then(async ({ messages, replyCounts }) => {
         // Guard against stale responses when the user rapidly switches channels:
         // the cleanup function sets `stale = true` before the new effect runs.
-        if (!stale) {
-          dispatch({ type: "SET_MESSAGES", messages, replyCounts });
-        }
+        if (stale) return;
+
+        // Decrypt history if possible
+        const decryptedMessages = await Promise.all(messages.map(async (m) => {
+            if (m.encrypted && E2eService.hasKey()) {
+                try {
+                    // Use message ID as context ID (nonce source)
+                     const plaintext = await E2eService.decrypt(m.text, m.id);
+                     return { ...m, text: plaintext, isEncryptedLocked: false };
+                } catch (err) {
+                    console.warn(`Failed to decrypt message ${m.id}`, err);
+                    return { ...m, isEncryptedLocked: true };
+                }
+            } else if (m.encrypted) {
+                return { ...m, isEncryptedLocked: true };
+            }
+            return m;
+        }));
+
+        dispatch({ type: "SET_MESSAGES", messages: decryptedMessages as ChatMessage[], replyCounts });
       })
       .catch((err) => {
         console.error("Failed to load message history:", err);
@@ -689,11 +768,10 @@ export default function App() {
     );
   }
 
-  // Show onboarding for new users: no channels loaded yet AND not dismissed
-  // Wait until channels have been fetched (they're loaded in the useEffect above)
-  // to avoid flashing onboarding for returning users.
-  const channelsLoaded = state.channels.length > 0;
-  const showOnboarding = !onboardingDismissed && !channelsLoaded && !state.openclawConnected;
+  // Show onboarding for new users: channels have been fetched (first API call completed)
+  // and none exist. This prevents flashing onboarding for returning users whose
+  // channel list simply hasn't loaded yet.
+  const showOnboarding = !onboardingDismissed && channelsLoadedOnce && state.channels.length === 0 && !state.openclawConnected;
 
   if (showOnboarding) {
     return (
@@ -712,67 +790,122 @@ export default function App() {
 
   const isAutomationsView = state.activeView === "automations";
 
+  // ---- Mobile layout ----
+  if (isMobile) {
+    return (
+      <AppStateContext.Provider value={state}>
+        <AppDispatchContext.Provider value={dispatch}>
+          <MobileLayout
+            sendMessage={sendMessage}
+            theme={theme}
+            onToggleTheme={toggleTheme}
+            showSettings={showSettings}
+            onOpenSettings={() => setShowSettings(true)}
+            onCloseSettings={() => setShowSettings(false)}
+            handleDefaultModelChange={handleDefaultModelChange}
+            handleSelectJob={handleSelectJob}
+          />
+        </AppDispatchContext.Provider>
+      </AppStateContext.Provider>
+    );
+  }
+
+  // ---- Desktop layout with resizable panels ----
   return (
     <AppStateContext.Provider value={state}>
       <AppDispatchContext.Provider value={dispatch}>
         <div className="flex flex-col h-screen">
           <div className="flex flex-1 min-h-0">
-            {/* Icon Rail (68px fixed) */}
+            {/* Icon Rail — fixed 48px, outside Group */}
             <IconRail onToggleTheme={toggleTheme} onOpenSettings={() => setShowSettings(true)} theme={theme} />
 
-            {/* Sidebar (220px) — switches based on active view */}
-            {isAutomationsView ? <CronSidebar /> : <Sidebar />}
-
-            {/* Main content area (flex) */}
-            {isAutomationsView ? (
-              <CronDetail />
-            ) : (
-              <div className="flex-1 flex flex-col min-w-0">
-                {hasSession ? (
-                  <>
-                    <div className="flex-1 flex min-h-0">
-                      {isBackgroundTask && (
-                        <JobList
-                          jobs={state.jobs}
-                          selectedJobId={state.selectedJobId}
-                          onSelectJob={handleSelectJob}
-                        />
-                      )}
-
-                      <ChatWindow sendMessage={sendMessage} />
-
-                      {/* Detail Panel (right side, conditional) */}
-                      <ThreadPanel sendMessage={sendMessage} />
-                    </div>
-                  </>
+            {/* Resizable panels: Sidebar + Content */}
+            <Group
+              orientation="horizontal"
+              defaultLayout={mainLayout.defaultLayout}
+              onLayoutChanged={mainLayout.onLayoutChanged}
+              id="botschat-main"
+              className="flex-1"
+            >
+              {/* Sidebar panel */}
+              <Panel id="sidebar" defaultSize="15%" minSize="5%" maxSize="30%">
+                {isAutomationsView ? <CronSidebar /> : <Sidebar />}
+              </Panel>
+
+              <ResizeHandle />
+
+              {/* Main content panel */}
+              <Panel id="content">
+                {isAutomationsView ? (
+                  <CronDetail />
                 ) : (
-                  <div className="flex-1 flex items-center justify-center" style={{ background: "var(--bg-surface)" }}>
-                    <div className="text-center">
-                      <svg
-                        className="w-20 h-20 mx-auto mb-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        strokeWidth={1}
-                        style={{ color: "var(--text-muted)" }}
+                  <div className="flex-1 flex flex-col min-w-0 h-full">
+                    {hasSession ? (
+                      <Group
+                        orientation="horizontal"
+                        defaultLayout={contentLayout.defaultLayout}
+                        onLayoutChanged={contentLayout.onLayoutChanged}
+                        id="botschat-content"
                       >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                        />
-                      </svg>
-                      <p className="text-body font-bold" style={{ color: "var(--text-muted)" }}>
-                        Select a channel to get started
-                      </p>
-                      <p className="text-caption mt-1" style={{ color: "var(--text-muted)" }}>
-                        Choose a channel from the sidebar
-                      </p>
-                    </div>
+                        {/* JobList — conditional */}
+                        {isBackgroundTask && (
+                          <>
+                            <Panel id="joblist" defaultSize="15%" minSize="5%" maxSize="30%">
+                              <JobList
+                                jobs={state.jobs}
+                                selectedJobId={state.selectedJobId}
+                                onSelectJob={handleSelectJob}
+                              />
+                            </Panel>
+                            <ResizeHandle />
+                          </>
+                        )}
+
+                        {/* ChatWindow — main area */}
+                        <Panel id="chat">
+                          <ChatWindow sendMessage={sendMessage} />
+                        </Panel>
+
+                        {/* ThreadPanel — conditional */}
+                        {state.activeThreadId && (
+                          <>
+                            <ResizeHandle />
+                            <Panel id="thread" defaultSize="28%" minSize="10%" maxSize="50%">
+                              <ThreadPanel sendMessage={sendMessage} />
+                            </Panel>
+                          </>
+                        )}
+                      </Group>
+                    ) : (
+                      <div className="flex-1 flex items-center justify-center" style={{ background: "var(--bg-surface)" }}>
+                        <div className="text-center">
+                          <svg
+                            className="w-20 h-20 mx-auto mb-4"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth={1}
+                            style={{ color: "var(--text-muted)" }}
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                            />
+                          </svg>
+                          <p className="text-body font-bold" style={{ color: "var(--text-muted)" }}>
+                            Select a channel to get started
+                          </p>
+                          <p className="text-caption mt-1" style={{ color: "var(--text-muted)" }}>
+                            Choose a channel from the sidebar
+                          </p>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 )}
-              </div>
-            )}
+              </Panel>
+            </Group>
           </div>
 
           {/* Global debug log panel — collapsible at bottom */}
@@ -787,11 +920,11 @@ export default function App() {
             onClick={() => setShowSettings(false)}
           >
             <div
-              className="rounded-lg p-6 w-[420px] max-w-[90vw]"
+              className="rounded-lg p-6 w-[540px] max-w-[90vw] max-h-[85vh] flex flex-col"
               style={{ background: "var(--bg-surface)", boxShadow: "var(--shadow-lg)" }}
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="flex items-center justify-between mb-5">
+              <div className="flex items-center justify-between mb-4">
                 <h2 className="text-h1 font-bold" style={{ color: "var(--text-primary)" }}>
                   Settings
                 </h2>
@@ -806,46 +939,96 @@ export default function App() {
                 </button>
               </div>
 
-              <div className="space-y-5">
-                {/* Default Model */}
-                <div>
-                  <label
-                    className="block text-caption font-bold mb-1.5"
-                    style={{ color: "var(--text-secondary)" }}
-                  >
-                    Default Model
-                  </label>
-                  <ModelSelect
-                    value={state.defaultModel ?? ""}
-                    onChange={handleDefaultModelChange}
-                    models={state.models}
-                    placeholder="Not set (use agent default)"
-                  />
-                  <p className="text-tiny mt-1.5" style={{ color: "var(--text-muted)" }}>
-                    Default model for new conversations. You can override per session using{" "}
-                    <code>/model</code> or per automation in its settings.
-                  </p>
-                </div>
-
-                {/* Connection info */}
-                <div>
-                  <label
-                    className="block text-caption font-bold mb-1.5"
-                    style={{ color: "var(--text-secondary)" }}
-                  >
-                    Current Session Model
-                  </label>
-                  <span
-                    className="text-body font-mono"
-                    style={{ color: (state.sessionModel || state.defaultModel) ? "var(--text-primary)" : "var(--text-muted)" }}
-                  >
-                    {state.sessionModel ?? state.defaultModel ?? "Not connected"}
-                  </span>
-                </div>
+              {/* Tab bar */}
+              <div className="flex gap-4 mb-4" style={{ borderBottom: "1px solid var(--border)" }}>
+                <button
+                  className="pb-2 text-caption font-bold transition-colors"
+                  style={{
+                    color: settingsTab === "general" ? "var(--text-primary)" : "var(--text-muted)",
+                    borderBottom: settingsTab === "general" ? "2px solid var(--bg-active)" : "2px solid transparent",
+                    marginBottom: "-1px",
+                  }}
+                  onClick={() => setSettingsTab("general")}
+                >
+                  General
+                </button>
+                <button
+                  className="pb-2 text-caption font-bold transition-colors"
+                  style={{
+                    color: settingsTab === "connection" ? "var(--text-primary)" : "var(--text-muted)",
+                    borderBottom: settingsTab === "connection" ? "2px solid var(--bg-active)" : "2px solid transparent",
+                    marginBottom: "-1px",
+                  }}
+                  onClick={() => setSettingsTab("connection")}
+                >
+                  Connection
+                </button>
+                <button
+                  className="pb-2 text-caption font-bold transition-colors"
+                  style={{
+                    color: settingsTab === "security" ? "var(--text-primary)" : "var(--text-muted)",
+                    borderBottom: settingsTab === "security" ? "2px solid var(--bg-active)" : "2px solid transparent",
+                    marginBottom: "-1px",
+                  }}
+                  onClick={() => setSettingsTab("security")}
+                >
+                  Security
+                </button>
+              </div>
+
+              {/* Tab content — scrollable */}
+              <div className="flex-1 min-h-0 overflow-y-auto">
+                {settingsTab === "general" && (
+                  <div className="space-y-5">
+                    {/* Default Model */}
+                    <div>
+                      <label
+                        className="block text-caption font-bold mb-1.5"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
+                        Default Model
+                      </label>
+                      <ModelSelect
+                        value={state.defaultModel ?? ""}
+                        onChange={handleDefaultModelChange}
+                        models={state.models}
+                        placeholder="Not set (use agent default)"
+                      />
+                      <p className="text-tiny mt-1.5" style={{ color: "var(--text-muted)" }}>
+                        Default model for new conversations. You can override per session using{" "}
+                        <code>/model</code> or per automation in its settings.
+                      </p>
+                    </div>
+
+                    {/* Current Session Model */}
+                    <div>
+                      <label
+                        className="block text-caption font-bold mb-1.5"
+                        style={{ color: "var(--text-secondary)" }}
+                      >
+                        Current Session Model
+                      </label>
+                      <span
+                        className="text-body font-mono"
+                        style={{ color: (state.sessionModel || state.defaultModel) ? "var(--text-primary)" : "var(--text-muted)" }}
+                      >
+                        {state.sessionModel ?? state.defaultModel ?? "Not connected"}
+                      </span>
+                    </div>
+                  </div>
+                )}
+
+                {settingsTab === "connection" && (
+                  <ConnectionSettings />
+                )}
+
+                {settingsTab === "security" && (
+                  <E2ESettings />
+                )}
               </div>
 
               <div
-                className="mt-6 pt-4 flex justify-end"
+                className="mt-4 pt-4 flex justify-end"
                 style={{ borderTop: "1px solid var(--border)" }}
               >
                 <button

package/packages/web/src/analytics.ts

@@ -0,0 +1,57 @@
+/**
+ * Google Analytics (GA4). Only loads when VITE_GA_MEASUREMENT_ID is set (e.g. in .env.production).
+ * Set VITE_GA_MEASUREMENT_ID to your GA4 Measurement ID (e.g. G-XXXXXXXXXX) to enable.
+ */
+
+declare global {
+  interface Window {
+    dataLayer: unknown[];
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+const MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID as string | undefined;
+
+function loadGtag(): boolean {
+  if (!MEASUREMENT_ID || typeof window === "undefined") return false;
+  if (window.gtag) return true;
+
+  window.dataLayer = window.dataLayer || [];
+  window.gtag = function gtag() {
+    window.dataLayer.push(arguments);
+  };
+  window.gtag("js", new Date());
+  window.gtag("config", MEASUREMENT_ID);
+
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${MEASUREMENT_ID}`;
+  document.head.appendChild(script);
+  return true;
+}
+
+let initialized = false;
+
+export function initAnalytics(): void {
+  if (initialized) return;
+  initialized = loadGtag();
+}
+
+export function isAnalyticsEnabled(): boolean {
+  return initialized && !!window.gtag;
+}
+
+/**
+ * Send a page_view or custom event to GA4. Use after route/view changes in the SPA.
+ */
+export function gtagEvent(name: string, params?: Record<string, string>): void {
+  if (!MEASUREMENT_ID || !window.gtag) return;
+  window.gtag("event", name, params);
+}
+
+/**
+ * Track a virtual page view (e.g. "Messages" / "Automations" tab).
+ */
+export function gtagPageView(page: string): void {
+  gtagEvent("page_view", { page_path: `/${page}`, page_title: page });
+}