feat(frontend): implement Measure AI chat

closes #2725

Author: anupcowkur

backend/api/main.go

@@ -133,6 +133,7 @@ func main() {
 		teams.GET(":id/members", measure.GetTeamMembers)
 		teams.DELETE(":id/members/:memberId", measure.RemoveTeamMember)
 		teams.GET(":id/usage", measure.GetUsage)
+		teams.POST(":id/usage/ai", measure.ReportAiUsage)
 		teams.GET(":id/slack", measure.GetTeamSlack)
 		teams.PATCH(":id/slack/status", measure.UpdateTeamSlackStatus)
 	}

backend/api/measure/usage.go

@@ -11,6 +11,23 @@ import (
 	"github.com/leporo/sqlf"
 )
 
+type AiUsageReport struct {
+	TeamId       string `json:"team_id"`
+	Model        string `json:"model"`
+	InputTokens  uint64 `json:"input_tokens"`
+	OutputTokens uint64 `json:"output_tokens"`
+}
+
+type AiUsage struct {
+	TeamId         string           `json:"team_id"`
+	MonthlyAiUsage []MonthlyAiUsage `json:"monthly_ai_usage"`
+}
+
+type MonthlyAiUsage struct {
+	MonthName       string `json:"month_year"`
+	TotalTokenCount uint64 `json:"total_token_count"`
+}
+
 type AppUsage struct {
 	AppId           string            `json:"app_id"`
 	AppName         string            `json:"app_name"`
@@ -159,6 +176,61 @@ func GetUsage(c *gin.Context) {
 		return
 	}
 
+	// Query ai metrics for team
+	aiMetricsStmt := sqlf.
+		From(`ai_metrics`).
+		Select("team_id").
+		Select("formatDateTime(toStartOfMonth(timestamp), '%b %Y') AS month_year").
+		Select("sumMerge(input_token_count) + sumMerge(output_token_count) AS total_token_count").
+		Where("timestamp >= addMonths(toStartOfMonth(?), -2) AND timestamp < toStartOfMonth(addMonths(?, 1))", now, now).
+		GroupBy("team_id, toStartOfMonth(timestamp)").
+		OrderBy("team_id, toStartOfMonth(timestamp) DESC")
+
+	defer aiMetricsStmt.Close()
+
+	aiMetricsRows, err := server.Server.ChPool.Query(ctx, aiMetricsStmt.String(), aiMetricsStmt.Args()...)
+	if err != nil {
+		msg := fmt.Sprintf("error occurred while querying AI metrics for team: %s", teamId)
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	aiUsageMap := make(map[string]*AiUsage)
+
+	// Initialize aiUsageMap
+	aiUsageMap[teamId.String()] = &AiUsage{
+		TeamId:         teamId.String(),
+		MonthlyAiUsage: make([]MonthlyAiUsage, 0, 3),
+	}
+
+	// Populate aiUsageMap with metrics rows from DB
+	for aiMetricsRows.Next() {
+		var teamId, monthYear string
+		var totalTokenCount uint64
+
+		if err := aiMetricsRows.Scan(&teamId, &monthYear, &totalTokenCount); err != nil {
+			msg := fmt.Sprintf("error occurred while scanning AI metrics row for team: %s", teamId)
+			fmt.Println(msg, err)
+			c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+			return
+		}
+
+		if aiUsage, exists := aiUsageMap[teamId]; exists {
+			aiUsage.MonthlyAiUsage = append(aiUsage.MonthlyAiUsage, MonthlyAiUsage{
+				MonthName:       monthYear,
+				TotalTokenCount: totalTokenCount,
+			})
+		}
+	}
+
+	if err := aiMetricsRows.Err(); err != nil {
+		msg := fmt.Sprintf("error occurred while iterating AI metrics rows for team: %s", teamId)
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
 	// Ensure all apps have entries for all three months by adding 0 values for missing months
 	for _, appUsage := range appUsageMap {
 		monthDataMap := make(map[string]MonthlyAppUsage)
@@ -183,11 +255,115 @@ func GetUsage(c *gin.Context) {
 		appUsage.MonthlyAppUsage = newMonthlyAppUsage
 	}
 
+	// Ensure all AI usages have entries for all three months by adding 0 values for missing months
+	for _, aiUsage := range aiUsageMap {
+		monthDataMap := make(map[string]MonthlyAiUsage)
+		for _, usage := range aiUsage.MonthlyAiUsage {
+			monthDataMap[usage.MonthName] = usage
+		}
+
+		newMonthlyAiUsage := make([]MonthlyAiUsage, 0, 3)
+		for _, monthName := range monthNames {
+			if usage, exists := monthDataMap[monthName]; exists {
+				newMonthlyAiUsage = append(newMonthlyAiUsage, usage)
+			} else {
+				newMonthlyAiUsage = append(newMonthlyAiUsage, MonthlyAiUsage{
+					MonthName:       monthName,
+					TotalTokenCount: 0,
+				})
+			}
+		}
+		aiUsage.MonthlyAiUsage = newMonthlyAiUsage
+	}
+
 	// Convert map to slice for JSON response
-	var result []AppUsage
+	var appUsageResult []AppUsage
 	for _, appUsage := range appUsageMap {
-		result = append(result, *appUsage)
+		appUsageResult = append(appUsageResult, *appUsage)
+	}
+
+	var aiUsageResult []AiUsage
+	for _, aiUsage := range aiUsageMap {
+		aiUsageResult = append(aiUsageResult, *aiUsage)
+	}
+
+	result := gin.H{
+		"app_usage": appUsageResult,
+		"ai_usage":  aiUsageResult,
 	}
 
 	c.JSON(http.StatusOK, result)
 }
+
+func ReportAiUsage(c *gin.Context) {
+	ctx := c.Request.Context()
+	userId := c.GetString("userId")
+	teamId, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `team id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	var aiUsageReport AiUsageReport
+
+	if err := c.ShouldBindJSON(&aiUsageReport); err != nil {
+		msg := "failed to parse AI usage payload"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error": msg,
+		})
+		return
+	}
+
+	if ok, err := PerformAuthz(userId, teamId.String(), *ScopeTeamRead); err != nil {
+		msg := `couldn't perform authorization checks`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	} else if !ok {
+		msg := fmt.Sprintf(`you don't have permissions for team [%s]`, teamId)
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	if ok, err := PerformAuthz(userId, teamId.String(), *ScopeAppRead); err != nil {
+		msg := `couldn't perform authorization checks`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	} else if !ok {
+		msg := fmt.Sprintf(`you don't have permissions to read apps in team [%s]`, teamId)
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	var team = new(Team)
+	team.ID = &teamId
+
+	// insert metrics into clickhouse table
+	metricsSelectStmt := sqlf.
+		Select("? AS team_id", team.ID).
+		Select("? AS timestamp", time.Now()).
+		Select("? AS model", aiUsageReport.Model).
+		Select("sumState(CAST(? AS UInt32)) AS input_token_count", aiUsageReport.InputTokens).
+		Select("sumState(CAST(? AS UInt32)) AS output_token_count", aiUsageReport.OutputTokens)
+	selectSQL := metricsSelectStmt.String()
+	args := metricsSelectStmt.Args()
+	defer metricsSelectStmt.Close()
+	metricsInsertStmt := "INSERT INTO ai_metrics " + selectSQL
+
+	if err := server.Server.ChPool.Exec(ctx, metricsInsertStmt, args...); err != nil {
+		msg := `failed to insert ai metrics into clickhouse`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": msg,
+		})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"ok": "done",
+	})
+}

docs/CONTRIBUTING.md

@@ -258,3 +258,6 @@ set VERSION $(git cliff --bumped-version) && git tag -s $VERSION -m $VERSION &&
 - Public facing docs should be in [docs](../README.md) folder - API requests & responses, self host guide, sdk guides and so on
 - Main folder of subproject should link to main guide. ex: [frontend README](../../frontend/README.md) has link to self hosting and local dev guide
 - Non public facing docs can stay in sub folder. ex: [backend benchmarking README](../../backend/benchmarking/README.md) which describes its purpose
+
+### Updating Documentation
+- When updating docs in the `docs` folder, the `docs-embeddings.json` file needs to be updated so that the AI assistant can reference them. To update the embedding, you should run `npm run generate-docs-embeddings` from inside the `frontend/dashboard` folder. You will need to have [setup AI Integration](../hosting/ai.md) before running the command so that it can access the embedding model and update the embedding file. This file needs to be committed as part of the same PR that updates the docs.

docs/README.md

@@ -49,6 +49,7 @@ feature's documentation to understand its underlying mechanism and enhance your
   happens
 * [**App Size Monitoring**](features/feature-app-size-monitoring.md) — Monitor app size changes
 * [**Alert Notifications**](features/feature-alerts.md) — Receive Crash & ANR spike alerts and Daily Summaries for core app metrics.
+* [**Measure AI**](features/feature-ai.md) — Debug Crashes & ANRs with AI assistance.
 
 # Configuration Options
 

docs/features/feature-ai.md

@@ -0,0 +1,28 @@
+# AI 
+
+Measure makes it easy to debug Crashes and ANRs with AI assistance.
+
+* [**Copy AI Context**](#copy-ai-context)
+* [**AI Integration**](#ai-integration)
+  * [**Setting Up AI integration**](#setting-up-ai-integration)
+  * [**Debugging with AI**](#debugging-with-ai)
+
+## Copy AI Context
+On Crash and ANR details pages, you will see a `Copy AI Context` button. This allows you to copy the relevant stacktrace and session timeline to the copy clipboard for easy pasting into an external LLM interface of your choice.
+
+This feature does not require setting up the AI Assitant and can be used directly.
+
+## AI Assistant Integration
+This integration enables developers to get help with Crash/ANR debugging via our AI assitant.
+
+### Setting up AI integration
+If you are a self hosted user, please set up AI Assistant integration if you haven't done so using this [guide](/docs/hosting/ai.md).
+
+### Debugging with AI
+You will be able to see a `Debug With AI` button on Crash and ANR details pages. You can click it to open the assitant interface and start chatting. 
+
+You can attach the current exception context as well as the corresponding session timeline using the chat input toolbar.
+
+You can also attach code files and images to help in your debugging workflow.
+
+

docs/hosting/README.md

@@ -159,6 +159,12 @@ Optionally, you can set up a Slack app if you want to recieve alert notications
 
 Once your slack integration is set up, copy the values and enter in the relevant prompts. If you wish to ignore it, enter empty values and proceed.
 
+Additionally, you can set up AI integration if you want to use the AI assistant features. Follow the below link to set it up:
+
+- [Set up AI Assistant Integration](./ai.md)
+
+Once your AI integration is set up, copy the values and enter in the relevant prompts. If you wish to ignore it, enter empty values and proceed.
+
 Once completed, the install script will attempt to start all the Measure docker compose services. You should see a similar output.
 
 <p align="center">

docs/hosting/ai.md

@@ -0,0 +1,36 @@
+# Set up AI Gateway API key
+
+Measure uses Vercel's AI Gateway to implement LLM based features.
+
+You can sign up for an account and get your API key [here](https://vercel.com/ai-gateway).
+
+
+## Configure SMTP email settings for existing users
+
+If you are upgrading from v0.8.x, you would need to manually configure the API key.
+
+1. Edit the `self-host/.env` file.
+
+2. Add the following environment variables as obtained from Vercel.
+
+    ```sh
+    AI_GATEWAY_API_KEY=your-key   # change this
+    ```
+
+3. Run the following command to shutdown all services.
+
+    ```sh
+    sudo docker compose \
+      -f compose.yml \
+      -f compose.prod.yml \
+      --profile migrate \
+      down
+    ```
+
+4. Finally, run the `install.sh` script for the configuration to take effect.
+
+    ```sh
+    sudo ./install.sh
+    ```
+
+[Go back to self host guide](./README.md)

frontend/dashboard/__tests__/pages/alerts_overview_test.tsx

@@ -200,22 +200,6 @@ describe('AlertsOverview Component', () => {
         const link = screen.getByRole('link', { name: /ID: alert1/i })
         expect(link).toBeInTheDocument()
         expect(link).toHaveAttribute('href', 'http://example.com/alert1')
-
-        // Find the table row that contains this link
-        const row = link.closest('tr')
-        expect(row).toBeInTheDocument()
-
-        // Simulate keyboard navigation (Enter) on the row
-        await act(async () => {
-            fireEvent.keyDown(row!, { key: 'Enter' })
-        })
-        expect(pushMock).toHaveBeenCalledWith('http://example.com/alert1')
-
-        // Simulate keyboard navigation (Space) on the row
-        await act(async () => {
-            fireEvent.keyDown(row!, { key: ' ' })
-        })
-        expect(pushMock).toHaveBeenCalledWith('http://example.com/alert1')
     })
 
     describe('Pagination offset handling', () => {

frontend/dashboard/__tests__/pages/bug_reports_overview_test.tsx

@@ -238,22 +238,6 @@ describe('BugReportsOverview Component', () => {
         const link = screen.getByRole('link', { name: /ID: bug1/i })
         expect(link).toBeInTheDocument()
         expect(link).toHaveAttribute('href', '/123/bug_reports/app1/bug1')
-
-        // Find the table row that contains this link
-        const row = link.closest('tr')
-        expect(row).toBeInTheDocument()
-
-        // Simulate keyboard navigation (Enter) on the row
-        await act(async () => {
-            fireEvent.keyDown(row!, { key: 'Enter' })
-        })
-        expect(pushMock).toHaveBeenCalledWith('/123/bug_reports/app1/bug1')
-
-        // Simulate keyboard navigation (Space) on the row
-        await act(async () => {
-            fireEvent.keyDown(row!, { key: ' ' })
-        })
-        expect(pushMock).toHaveBeenCalledWith('/123/bug_reports/app1/bug1')
     })
 
     it('handles bug reports with no description properly', async () => {