Revert "remove accountbutton"

gui/src/components/AssistantAndOrgListbox/index.tsx

@@ -18,7 +18,6 @@ import {
   Transition,
   useFontSize,
 } from "../ui";
-import { AccountOption } from "./AccountOption";
 import { AssistantOptions } from "./AssistantOptions";
 import { ScopeSelect } from "./ScopeSelect";
 import { SelectedAssistantButton } from "./SelectedAssistantButton";
@@ -34,6 +33,7 @@ export function AssistantAndOrgListbox() {
     selectedProfile,
     session,
     login,
+    logout,
     organizations,
     refreshProfiles,
   } = useAuth();
@@ -57,6 +57,11 @@ export function AssistantAndOrgListbox() {
     close();
   }
 
+  function onLogout() {
+    logout();
+    close();
+  }
+
   useEffect(() => {
     let lastToggleTime = 0;
     const DEBOUNCE_MS = 800;
@@ -184,7 +189,21 @@ export function AssistantAndOrgListbox() {
                 </span>
               </ListboxOption>
 
-              <AccountOption onClose={close} />
+              {session && (
+                <ListboxOption
+                  value="log-out"
+                  fontSizeModifier={-2}
+                  className="border-border border-b px-3 py-1.5"
+                  onClick={onLogout}
+                >
+                  <div
+                    className="text-description flex flex-row items-center"
+                    style={{ fontSize: tinyFont }}
+                  >
+                    Log out
+                  </div>
+                </ListboxOption>
+              )}
 
               <div
                 className="text-description border-border flex items-center justify-between gap-1.5 border-x-0 border-b-0 border-t border-solid px-2 py-2"

gui/src/pages/config/AccountButton.tsx

@@ -0,0 +1,82 @@
+import { UserCircleIcon } from "@heroicons/react/24/solid";
+import { isOnPremSession } from "core/control-plane/AuthTypes";
+import { ScopeSelect } from "../../components/AssistantAndOrgListbox/ScopeSelect";
+import {
+  Button,
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "../../components/ui";
+import { useAuth } from "../../context/Auth";
+import { useAppSelector } from "../../redux/hooks";
+import { selectCurrentOrg } from "../../redux/slices/profilesSlice";
+
+export function AccountButton() {
+  const { session, logout, login, organizations } = useAuth();
+  const selectedOrg = useAppSelector(selectCurrentOrg);
+
+  if (!session) {
+    return (
+      <Button
+        variant="outline"
+        className="mb-1 whitespace-nowrap py-1"
+        onClick={() => login(false)}
+      >
+        Sign in
+      </Button>
+    );
+  }
+
+  // No login button for on-prem deployments
+  if (isOnPremSession(session)) {
+    return null;
+  }
+
+  return (
+    <Popover className="relative">
+      {({ close }) => (
+        <>
+          <PopoverButton className="bg-vsc-background hover:bg-vsc-input-background text-vsc-foreground my-0.5 flex cursor-pointer rounded-md border-none px-2">
+            <div className="flex items-center gap-1.5">
+              <span className="font-medium">
+                {selectedOrg === null ? "Personal" : selectedOrg.name}
+              </span>
+              <UserCircleIcon className="h-6 w-6" />
+            </div>
+          </PopoverButton>
+
+          <Transition>
+            <PopoverPanel className="bg-vsc-input-background xs:p-4 absolute right-0 mt-1 rounded-md border border-zinc-700 p-2 shadow-lg">
+              <div className="flex flex-col gap-3">
+                <div className="flex flex-col">
+                  <span className="font-medium">{session.account.label}</span>
+                  <span className="text-lightgray text-sm">
+                    {session.account.id}
+                  </span>
+                </div>
+
+                {organizations.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    <label className="text-vsc-foreground text-xs">
+                      Organization
+                    </label>
+                    <ScopeSelect onSelect={close} />
+                  </div>
+                )}
+
+                <Button
+                  variant="ghost"
+                  onClick={logout}
+                  className="!mx-0 w-full"
+                >
+                  Sign out
+                </Button>
+              </div>
+            </PopoverPanel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+}

gui/src/pages/config/index.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { PageHeader } from "../../components/PageHeader";
 import { useNavigationListener } from "../../hooks/useNavigationListener";
 import { fontSize } from "../../util";
+import { AccountButton } from "./AccountButton";
 import { HelpCenterSection } from "./HelpCenterSection";
 import { IndexingSettingsSection } from "./IndexingSettingsSection";
 import KeyboardShortcuts from "./KeyboardShortcuts";
@@ -62,6 +63,7 @@ function ConfigPage() {
           showBorder
           onTitleClick={() => navigate("/")}
           title="Chat"
+          rightContent={<AccountButton />}
         />
 
         {/* Tab Headers */}

gui/src/pages/history/index.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { History } from "../../components/History";
 import { PageHeader } from "../../components/PageHeader";
 import { getFontSize } from "../../util";
+import { AccountButton } from "../config/AccountButton";
 
 export default function HistoryPage() {
   const navigate = useNavigate();
@@ -11,7 +12,12 @@ export default function HistoryPage() {
       className="flex flex-1 flex-col overflow-auto"
       style={{ fontSize: getFontSize() }}
     >
-      <PageHeader showBorder onTitleClick={() => navigate("/")} title="Chat" />
+      <PageHeader
+        showBorder
+        onTitleClick={() => navigate("/")}
+        title="Chat"
+        rightContent={<AccountButton />}
+      />
       <History />
     </div>
   );