DEV: Add total spending tile

Author: keegangeorge

app/serializers/ai_usage_serializer.rb

@@ -60,6 +60,7 @@ def summary
       total_request_tokens: object.total_request_tokens,
       total_response_tokens: object.total_response_tokens,
       total_requests: object.total_requests,
+      total_spending: object.total_spending,
       date_range: {
         start: object.start_date,
         end: object.end_date,

assets/javascripts/discourse/components/ai-usage.gjs

@@ -4,6 +4,7 @@ import { fn, hash } from "@ember/helper";
 import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
+import { modifier } from "ember-modifier";
 import { eq, gt, lt } from "truth-helpers";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import DButton from "discourse/components/d-button";
@@ -33,6 +34,22 @@ export default class AiUsage extends Component {
   @tracked isCustomDateActive = false;
   @tracked loadingData = true;
 
+  // TODO: currently doing dollar, but how should we handle other currencies?
+  addCurrency = modifier((element) => {
+    element.querySelectorAll(".d-stat-tile__label").forEach((label) => {
+      if (
+        label.innerText.trim() === i18n("discourse_ai.usage.total_spending")
+      ) {
+        const valueElement = label
+          .closest(".d-stat-tile")
+          ?.querySelector(".d-stat-tile__value");
+        if (valueElement) {
+          valueElement.innerText = `$${valueElement.innerText}`;
+        }
+      }
+    });
+  });
+
   constructor() {
     super(...arguments);
     this.fetchData();
@@ -153,6 +170,11 @@ export default class AiUsage extends Component {
         value: this.data.summary.total_cached_tokens,
         tooltip: i18n("discourse_ai.usage.stat_tooltips.cached_tokens"),
       },
+      {
+        label: i18n("discourse_ai.usage.total_spending"),
+        value: this.data.summary.total_spending,
+        tooltip: i18n("discourse_ai.usage.stat_tooltips.total_spending"),
+      },
     ];
   }
 
@@ -376,9 +398,10 @@ export default class AiUsage extends Component {
             class="ai-usage__summary"
           >
             <:content>
-              <DStatTiles as |tiles|>
+              <DStatTiles {{this.addCurrency}} as |tiles|>
                 {{#each this.metrics as |metric|}}
                   <tiles.Tile
+                    class="bar"
                     @label={{metric.label}}
                     @href={{metric.href}}
                     @value={{metric.value}}

config/locales/client.en.yml

@@ -239,6 +239,7 @@ en:
         net_request_tokens: "Net request tokens"
         cached_tokens: "Cached tokens"
         cached_request_tokens: "Cached request tokens"
+        total_spending: "Total spending"
         no_users: "No user usage data found"
         no_models: "No model usage data found"
         no_features: "No feature usage data found"
@@ -249,6 +250,7 @@ en:
           request_tokens: "Tokens used when the LLM tries to understand what you are saying"
           response_tokens: "Tokens used when the LLM responds to your prompt"
           cached_tokens: "Previously processed request tokens that the LLM reuses to optimize performance and cost"
+          total_spending: "Cumulative cost of all tokens used by the LLMs"
         periods:
           last_day: "Last 24 hours"
           last_week: "Last week"

lib/completions/report.rb

@@ -33,6 +33,27 @@ def total_requests
         stats.total_requests || 0
       end
 
+      def total_spending
+        total = total_input_spending + total_output_spending + total_cached_input_spending
+        total.round(2)
+      end
+
+      def total_input_spending
+        model_costs.sum { |row| row.input_cost.to_f * row.total_request_tokens.to_i / 1_000_000.0 }
+      end
+
+      def total_output_spending
+        model_costs.sum do |row|
+          row.output_cost.to_f * row.total_response_tokens.to_i / 1_000_000.0
+        end
+      end
+
+      def total_cached_input_spending
+        model_costs.sum do |row|
+          row.cached_input_cost.to_f * row.total_cached_tokens.to_i / 1_000_000.0
+        end
+      end
+
       def stats
         @stats ||=
           base_query.select(
@@ -46,6 +67,24 @@ def stats
           ]
       end
 
+      def model_costs
+        @model_costs ||=
+          base_query
+            .joins("LEFT JOIN llm_models ON llm_models.name = language_model")
+            .group(
+              "llm_models.name, llm_models.input_cost, llm_models.output_cost, llm_models.cached_input_cost",
+            )
+            .select(
+              "llm_models.name",
+              "llm_models.input_cost",
+              "llm_models.output_cost",
+              "llm_models.cached_input_cost",
+              "SUM(COALESCE(request_tokens, 0)) as total_request_tokens",
+              "SUM(COALESCE(response_tokens, 0)) as total_response_tokens",
+              "SUM(COALESCE(cached_tokens, 0)) as total_cached_tokens",
+            )
+      end
+
       def guess_period(period = nil)
         period = nil if %i[day month hour].include?(period)
         period ||