Coins fix (#898)

* wip(coins): use coin balance from basic stuff query,

* wip: balance low info callout

* refactor: remove old coin balance slice.

* refactor(login): remove old getUser service.

* refactor(balance callout): change 0 to low if balance is nullish

Author: MarcMcIntosh

refact-agent/gui/src/app/middleware.ts

@@ -14,6 +14,7 @@ import { pathApi } from "../services/refact/path";
 import { pingApi } from "../services/refact/ping";
 import {
   clearError,
+  setBallanceError,
   setError,
   setIsAuthError,
 } from "../features/Errors/errorsSlice";
@@ -41,6 +42,7 @@ import {
 } from "../services/graphql";
 import { push } from "../features/Pages/pagesSlice";
 import { setExpert, setModel } from "../features/ExpertsAndModels/expertsSlice";
+import { setBallanceInformation } from "../features/Errors/informationSlice";
 
 const AUTH_ERROR_MESSAGE =
   "There is an issue with your API key. Check out your API Key or re-login";
@@ -489,3 +491,27 @@ function getModel(preferences: unknown): string | null {
   }
   return preferences.model;
 }
+
+startListening({
+  matcher: graphqlQueriesAndMutations.endpoints.getBasicStuff.matchFulfilled,
+  effect: (action, listenerApi) => {
+    const state = listenerApi.getState();
+    const currentWorkspace = state.teams.workspace;
+    if (!currentWorkspace) return;
+
+    const workspaceInfo = action.payload.query_basic_stuff.workspaces.find(
+      (ws) => ws.ws_id === currentWorkspace.ws_id,
+    );
+    if (!workspaceInfo) return;
+
+    if (!workspaceInfo.have_coins_enough) {
+      // dispatch global error about not having enough coins
+      listenerApi.dispatch(setBallanceError("Your balance is exhausted!"));
+    } else if (
+      workspaceInfo.have_coins_exactly <= 2000 &&
+      !state.information.dismissed
+    ) {
+      listenerApi.dispatch(setBallanceInformation());
+    }
+  },
+});

refact-agent/gui/src/app/store.ts

@@ -45,10 +45,8 @@ import { currentProjectInfoReducer } from "../features/Chat/currentProject";
 import { checkpointsSlice } from "../features/Checkpoints/checkpointsSlice";
 import { checkpointsApi } from "../services/refact/checkpoints";
 import { patchesAndDiffsTrackerSlice } from "../features/PatchesAndDiffsTracker/patchesAndDiffsTrackerSlice";
-import { coinBallanceSlice } from "../features/CoinBalance/coinBalanceSlice";
 import { threadListSlice } from "../features/ThreadList/threadListSlice";
 import { threadMessagesSlice } from "../features/ThreadMessages/threadMessagesSlice";
-// import { expertsAndModelsMiddleWare } from "../features/ExpertsAndModels/middleware";
 import { expertsSlice } from "../features/ExpertsAndModels/expertsSlice";
 import { graphqlQueriesAndMutations } from "../services/graphql/queriesAndMutationsApi";
 import { groupsSlice } from "../features/Groups/groupsSlice";
@@ -103,7 +101,6 @@ const rootReducer = combineSlices(
   integrationsSlice,
   checkpointsSlice,
   patchesAndDiffsTrackerSlice,
-  coinBallanceSlice,
   threadListSlice,
   threadMessagesSlice,
   expertsSlice,
@@ -193,25 +190,9 @@ export const store = setUpStore();
 export type Store = typeof store;
 
 export const persistor = persistStore(store);
-// TODO: sync storage across windows (was buggy when deleting).
-// window.onstorage = (event) => {
-//   if (!event.key || !event.key.endsWith(persistConfig.key)) {
-//     return;
-//   }
-
-//   if (event.oldValue === event.newValue) {
-//     return;
-//   }
-//   if (event.newValue === null) {
-//     return;
-//   }
-
-// Infer the `RootState` and `AppDispatch` types from the store itself
-// export type RootState = ReturnType<typeof store.getState>;
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+
 export type AppDispatch = typeof store.dispatch;
 
-// Infer the type of `store`
 export type AppStore = typeof store;
 
 declare global {

refact-agent/gui/src/components/Callout/Callout.tsx

@@ -18,12 +18,12 @@ import classNames from "classnames";
 import {
   useAppDispatch,
   useAppSelector,
+  useCoinBallance,
   useConfig,
   useLogout,
   useOpenUrl,
 } from "../../hooks";
 import { getIsAuthError } from "../../features/Errors/errorsSlice";
-import { selectBalance } from "../../features/CoinBalance";
 import { dismissBalanceLowCallout } from "../../features/Errors/informationSlice";
 
 type RadixCalloutProps = React.ComponentProps<typeof RadixCallout.Root>;
@@ -272,7 +272,7 @@ export const BallanceCallOut: React.FC<
 export const BallanceLowInformation: React.FC<Omit<CalloutProps, "type">> = (
   props,
 ) => {
-  const balance = useAppSelector(selectBalance);
+  const ballance = useCoinBallance();
   const dispatch = useAppDispatch();
   const handleClose = useCallback(() => {
     dispatch(dismissBalanceLowCallout());
@@ -298,7 +298,10 @@ export const BallanceLowInformation: React.FC<Omit<CalloutProps, "type">> = (
       onClick={handleClose}
       {...props}
     >
-      💸 <Strong>Your balance is {balance}</Strong>
+      💸{" "}
+      <Strong>
+        Your balance is {ballance?.have_coins_exactly ?? "running low"}
+      </Strong>
       <br />
       Please{" "}
       <Link

refact-agent/gui/src/components/Toolbar/Dropdown.tsx

@@ -8,6 +8,7 @@ import {
   // useStartPollingForUser,
   useEventsBusForIDE,
   useBasicStuffQuery,
+  useCoinBallance,
 } from "../../hooks";
 import { useOpenUrl } from "../../hooks/useOpenUrl";
 import {
@@ -88,6 +89,9 @@ export const Dropdown: React.FC<DropdownProps> = ({
   const user = useBasicStuffQuery();
   const host = useAppSelector(selectHost);
   const dispatch = useAppDispatch();
+  const ballance = useCoinBallance();
+
+  const coinBallance = ballance?.have_coins_exactly ?? 0;
   // TODO: check how much of this is still used.
   // const { maxAgentUsageAmount, currentAgentUsage } = useAgentUsage();
 
@@ -97,17 +101,6 @@ export const Dropdown: React.FC<DropdownProps> = ({
   const activeWorkspace = useAppSelector(selectActiveWorkspace);
   const activeGroup = useAppSelector(selectActiveGroup);
 
-  const coinBalance = useMemo(() => {
-    const maybeWorkspaceWithCoins =
-      user.data?.query_basic_stuff.workspaces.find(
-        (w) => w.ws_id === activeWorkspace?.ws_id,
-      );
-    if (!maybeWorkspaceWithCoins) return null;
-    if (!maybeWorkspaceWithCoins.have_admin) return null;
-    if (maybeWorkspaceWithCoins.have_coins_exactly === 0) return null;
-    return Math.round(maybeWorkspaceWithCoins.have_coins_exactly / 1000);
-  }, [user.data, activeWorkspace?.ws_id]);
-
   const isActiveRootGroup = useMemo(() => {
     if (!activeWorkspace || !activeGroup) return false;
     return activeWorkspace.root_group_name === activeGroup.name;
@@ -197,11 +190,11 @@ export const Dropdown: React.FC<DropdownProps> = ({
           </DropdownMenu.Item>
         )}
 
-        {user.data && activeWorkspace && coinBalance && (
+        {user.data && activeWorkspace && coinBallance && (
           <DropdownMenu.Label>
             <Flex align="center" gap="1">
               {/**TODO: there could be multiple source for this */}
-              {coinBalance} <Coin />
+              {coinBallance / 100000} <Coin />
               <HoverCard.Root>
                 <HoverCard.Trigger>
                   <QuestionMarkCircledIcon style={{ marginLeft: 4 }} />

refact-agent/gui/src/features/CoinBalance/coinBalanceSlice.ts

@@ -28,6 +28,10 @@ export const errorSlice = createSlice({
       state.message = null;
       state.type = null;
     },
+    setBallanceError: (state, action: PayloadAction<string>) => {
+      state.type = "balance";
+      state.message = action.payload;
+    },
   },
   selectors: {
     getErrorMessage: (state) => state.message,
@@ -36,7 +40,8 @@ export const errorSlice = createSlice({
   },
 });
 
-export const { setError, setIsAuthError, clearError } = errorSlice.actions;
+export const { setError, setIsAuthError, clearError, setBallanceError } =
+  errorSlice.actions;
 export const { getErrorMessage, getIsAuthError, getErrorType } =
   errorSlice.selectors;
 

refact-agent/gui/src/features/CoinBalance/index.ts

@@ -1,5 +1,4 @@
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import { smallCloudApi } from "../../services/smallcloud";
 import { threadMessagesSlice } from "../ThreadMessages";
 import { isUsage } from "../../services/refact/chat";
 
@@ -31,6 +30,10 @@ export const informationSlice = createSlice({
       state.type = null;
       state.message = null;
     },
+    setBallanceInformation: (state) => {
+      if (state.dismissed) return state;
+      state.type = "balance";
+    },
   },
   selectors: {
     getInformationMessage: (state) => state.message,
@@ -66,24 +69,14 @@ export const informationSlice = createSlice({
         return state;
       },
     );
-
-    builder.addMatcher(
-      smallCloudApi.endpoints.getUser.matchFulfilled,
-      (state, action) => {
-        if (state.dismissed) return state;
-        if (state.message) return state;
-        if (action.payload.metering_balance <= 2000) {
-          state.type = "balance";
-          state.message =
-            "Your account is running low on credits. Please top up your account to continue using the service.";
-        }
-        return state;
-      },
-    );
   },
 });
 
-export const { setInformation, clearInformation, dismissBalanceLowCallout } =
-  informationSlice.actions;
+export const {
+  setInformation,
+  clearInformation,
+  dismissBalanceLowCallout,
+  setBallanceInformation,
+} = informationSlice.actions;
 export const { getInformationMessage, showBalanceLowCallout } =
   informationSlice.selectors;

refact-agent/gui/src/features/Errors/errorsSlice.ts

@@ -34,3 +34,4 @@ export * from "./useIdForThread";
 export * from "./useToolsForGroup";
 export * from "./useAttachImages";
 export * from "./useCapabilitiesForModel";
+export * from "./useCoinBalance";

refact-agent/gui/src/features/Errors/informationSlice.ts

@@ -1,6 +1,25 @@
+import { useMemo } from "react";
+import { selectActiveWorkspace } from "../features/Teams/teamsSlice";
 import { useAppSelector } from "./useAppSelector";
-import { selectBalance } from "../features/CoinBalance/coinBalanceSlice";
+import { useBasicStuffQuery } from "./useBasicStuffQuery";
 
 export function useCoinBallance() {
-  return useAppSelector(selectBalance);
+  const user = useBasicStuffQuery();
+
+  const activeWorkspace = useAppSelector(selectActiveWorkspace);
+  const balance = useMemo(() => {
+    const maybeWorkspaceWithCoins =
+      user.data?.query_basic_stuff.workspaces.find(
+        (w) => w.ws_id === activeWorkspace?.ws_id,
+      );
+
+    if (!maybeWorkspaceWithCoins) return null;
+
+    return {
+      have_coins_enough: maybeWorkspaceWithCoins.have_coins_enough,
+      have_coins_exactly: maybeWorkspaceWithCoins.have_coins_exactly as number,
+    };
+  }, [user.data, activeWorkspace?.ws_id]);
+
+  return balance;
 }