@chrysb/alphaclaw 0.8.2 → 0.8.3-beta.0

package/lib/public/js/components/routes/index.js

@@ -1,5 +1,6 @@
 export { AgentsRoute } from "./agents-route.js";
 export { BrowseRoute } from "./browse-route.js";
+export { ChatRoute } from "./chat-route.js";
 export { CronRoute } from "./cron-route.js";
 export { DoctorRoute } from "./doctor-route.js";
 export { EnvarsRoute } from "./envars-route.js";

package/lib/public/js/components/sidebar.js

@@ -7,6 +7,7 @@ import {
   BarChartLineIcon,
   Brain2LineIcon,
   BracesLineIcon,
+  ChatVoiceLineIcon,
   ComputerLineIcon,
   EyeLineIcon,
   FolderLineIcon,
@@ -93,6 +94,10 @@ export const AppSidebar = ({
   selectedAgentId = "",
   onSelectAgent = () => {},
   onAddAgent = () => {},
+  chatSessions = [],
+  selectedChatSessionKey = "",
+  onSelectChatSession = () => {},
+  onStartChat = () => {},
 }) => {
   const browseLayoutRef = useRef(null);
   const browseBottomPanelRef = useRef(null);
@@ -208,6 +213,14 @@ export const AppSidebar = ({
       >
         <${FolderLineIcon} className="sidebar-tab-icon" />
       </button>
+      <button
+        class=${`sidebar-tab ${sidebarTab === "chat" ? "active" : ""}`}
+        aria-label="Chat tab"
+        title="Chat"
+        onclick=${() => onSelectSidebarTab("chat")}
+      >
+        <${ChatVoiceLineIcon} className="sidebar-tab-icon" />
+      </button>
     </div>
     <div
       style=${{
@@ -283,6 +296,45 @@ export const AppSidebar = ({
           : null}
       </div>
     </div>
+    <div
+      style=${{
+        display: sidebarTab === "chat" ? "flex" : "none",
+        flexDirection: "column",
+        flex: "1 1 auto",
+        minHeight: 0,
+      }}
+    >
+      <div class="sidebar-chat-header">
+        <div class="sidebar-label sidebar-chat-label">Sessions</div>
+        <button
+          type="button"
+          class="sidebar-chat-new-button"
+          onclick=${onStartChat}
+          title="New chat"
+          aria-label="New chat"
+        >
+          <${AddLineIcon} className="sidebar-chat-new-icon" />
+        </button>
+      </div>
+      <div class="sidebar-chat-sessions-list">
+        ${chatSessions.length === 0
+          ? html`<div class="sidebar-chat-empty">No sessions found</div>`
+          : chatSessions.map(
+              (sessionRow) => html`
+                <button
+                  key=${sessionRow.key}
+                  class=${`sidebar-chat-session-item ${selectedChatSessionKey === sessionRow.key ? "active" : ""}`}
+                  onclick=${() => onSelectChatSession(sessionRow.key)}
+                  title=${sessionRow.label || sessionRow.key}
+                >
+                  <span class="sidebar-chat-session-name"
+                    >${sessionRow.label || sessionRow.key}</span
+                  >
+                </button>
+              `,
+            )}
+      </div>
+    </div>
     <div
       style=${{
         display: sidebarTab === "browse" ? "flex" : "none",

package/lib/public/js/hooks/use-browse-navigation.js

@@ -13,6 +13,7 @@ export const useBrowseNavigation = ({
 } = {}) => {
   const [sidebarTab, setSidebarTab] = useState(() => {
     if (location.startsWith("/browse")) return "browse";
+    if (location.startsWith("/chat")) return "chat";
     return "menu";
   });
   const [lastBrowsePath, setLastBrowsePath] = useState(() => {
@@ -28,7 +29,8 @@ export const useBrowseNavigation = ({
       typeof storedRoute === "string" &&
       storedRoute.startsWith("/") &&
       !storedRoute.startsWith("/browse") &&
-      !storedRoute.startsWith("/agents")
+      !storedRoute.startsWith("/agents") &&
+      !storedRoute.startsWith("/chat")
     ) {
       return storedRoute;
     }
@@ -57,7 +59,8 @@ export const useBrowseNavigation = ({
   useEffect(() => {
     setSidebarTab((currentTab) => {
       if (location.startsWith("/browse")) return "browse";
-      if (currentTab === "browse") return "menu";
+      if (location.startsWith("/chat")) return "chat";
+      if (currentTab === "browse" || currentTab === "chat") return "menu";
       return currentTab;
     });
   }, [location]);
@@ -79,6 +82,7 @@ export const useBrowseNavigation = ({
 
   useEffect(() => {
     if (location.startsWith("/browse")) return;
+    if (location.startsWith("/chat")) return;
     if (location.startsWith("/telegram")) return;
     setLastMenuRoute((currentRoute) =>
       currentRoute === location ? currentRoute : location,
@@ -150,10 +154,17 @@ export const useBrowseNavigation = ({
       setLocation(lastMenuRoute || `/${kDefaultUiTab}`);
       return;
     }
+    if (nextTab === "menu" && location.startsWith("/chat")) {
+      setLocation(lastMenuRoute || `/${kDefaultUiTab}`);
+      return;
+    }
     if (nextTab === "browse" && !location.startsWith("/browse")) {
       setLocation(buildBrowseRoute(lastBrowsePath));
       return;
     }
+    if (nextTab === "chat" && !location.startsWith("/chat")) {
+      setLocation("/chat");
+    }
   }, [lastBrowsePath, lastMenuRoute, location, setLocation]);
 
   const handleSelectNavItem = useCallback((itemId) => {

package/lib/public/js/lib/app-navigation.js

@@ -30,6 +30,7 @@ export const kNavSections = [
 export const getSelectedNavId = ({ isBrowseRoute = false, location = "" } = {}) => {
   if (isBrowseRoute) return "browse";
   if (location.startsWith("/telegram")) return "";
+  if (location.startsWith("/chat")) return "";
   if (location.startsWith("/models")) return "models";
   if (location.startsWith("/agents")) return "agents";
   if (location.startsWith("/providers")) return "models";

package/lib/public/js/lib/storage-keys.js

@@ -27,3 +27,6 @@ export const kTelegramWorkspaceCacheKey = "alphaclaw.telegram.workspaceCache";
 export const kAgentSessionsCacheKey = "alphaclaw.agent.sessionsCache";
 export const kAgentLastSessionKey = "alphaclaw.agent.lastSessionKey";
 
+// --- Chat ---
+export const kChatSessionDraftsStorageKey = "alphaclaw.chat.sessionDrafts";
+

package/lib/public/setup.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./css/shell.css" />
     <link rel="stylesheet" href="./css/explorer.css" />
     <link rel="stylesheet" href="./css/agents.css" />
+    <link rel="stylesheet" href="./css/chat.css" />
     <link rel="stylesheet" href="./css/cron.css" />
   </head>
   <body>

package/lib/server/auth-profiles.js

@@ -353,4 +353,4 @@ const createAuthProfiles = () => {
   };
 };
 
-module.exports = { createAuthProfiles };
+module.exports = { createAuthProfiles, getEnvVarForApiKeyProvider };