chore: update versions (#2484)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/apollo@6.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost/google-translation@0.0.7

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/react-apollo@7.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/apollo@6.0.2
    -   @nhost/react@3.0.2

## @nhost/react-urql@4.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react@3.0.2

## @nhost/stripe-graphql-js@1.0.6

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/graphql-js@0.1.5

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/hasura-auth-js@2.1.11

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/hasura-storage-js@2.2.6

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/nextjs@2.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react@3.0.2

## @nhost/nhost-js@3.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/hasura-storage-js@2.2.6
    -   @nhost/hasura-auth-js@2.1.11
    -   @nhost/graphql-js@0.1.5

## @nhost/react@3.0.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost/vue@2.0.3

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost/dashboard@1.6.1

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
- 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in
Dockerfile
-   Updated dependencies [8d91f71]
    -   @nhost/react-apollo@7.0.2
    -   @nhost/nextjs@2.0.2

## @nhost-examples/cli@0.1.3

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost-examples/codegen-react-apollo@0.1.11

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react-apollo@7.0.2
    -   @nhost/react@3.0.2

## @nhost-examples/codegen-react-query@0.1.12

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react@3.0.2

## @nhost-examples/codegen-react-urql@0.0.8

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react-urql@4.0.2
    -   @nhost/react@3.0.2

## @nhost-examples/docker-compose@0.0.7

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost-examples/multi-tenant-one-to-many@2.0.1

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost-examples/nextjs@0.1.13

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react-apollo@7.0.2
    -   @nhost/nextjs@2.0.2
    -   @nhost/react@3.0.2

## @nhost-examples/node-storage@0.0.5

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost-examples/nextjs-server-components@0.1.5

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/nhost-js@3.0.2

## @nhost-examples/sveltekit@0.2.2

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost-examples/react-apollo@0.1.18

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react-apollo@7.0.2
    -   @nhost/react@3.0.2

## @nhost-examples/react-gqty@1.0.1

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/react@3.0.2

## @nhost-examples/serverless-functions@0.0.10

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/stripe-graphql-js@1.0.6

## @nhost-examples/vue-apollo@0.0.10

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/apollo@6.0.2
    -   @nhost/nhost-js@3.0.2
    -   @nhost/vue@2.0.3

## @nhost-examples/vue-quickstart@0.0.10

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit
-   Updated dependencies [8d91f71]
    -   @nhost/apollo@6.0.2
    -   @nhost/vue@2.0.3

## @nhost/docgen@0.1.12

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

## @nhost/sync-versions@0.0.9

### Patch Changes

-   8d91f71: chore: update deps and enable pnpm audit

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hassan Ben Jobrane <hsanbenjobrane@gmail.com>

.github/CODEOWNERS

@@ -1,14 +1,14 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners
 
-/packages                                @szilarddoro
-/packages/docgen                         @szilarddoro
-/integrations/stripe-graphql-js          @elitan
-/.github                                 @szilarddoro
-/dashboard/                              @szilarddoro
-/docs/                                   @elitan
-/config/                                 @szilarddoro
-/examples/                               @szilarddoro
-/examples/codegen-react-apollo           @elitan @szilarddoro
-/examples/codegen-react-query            @elitan @szilarddoro
-/examples/react-apollo-crm               @elitan @szilarddoro
+/packages                                @nunopato @onehassan
+/packages/docgen                         @nunopato @onehassan
+/integrations/stripe-graphql-js          @nunopato @onehassan
+/.github                                 @nunopato @onehassan
+/dashboard/                              @nunopato @onehassan
+/docs/                                   @nunopato @onehassan
+/config/                                 @nunopato @onehassan
+/examples/                               @nunopato @onehassan
+/examples/codegen-react-apollo           @nunopato @onehassan
+/examples/codegen-react-query            @nunopato @onehassan
+/examples/react-apollo-crm               @nunopato @onehassan

.github/actions/install-dependencies/action.yaml

@@ -14,7 +14,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8.6.2
+        version: 8.10.5
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir

.github/labeler.yml

@@ -4,7 +4,6 @@ dashboard:
 documentation:
   - any:
       - docs/**/*
-      - '!docs/docs/reference/docgen/**/*'
 
 examples:
   - examples/**/*

.github/renovate.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ],
-  "docker-compose": {
-    "enabled": true
-  },
-  "ignoreDeps": [
-    "pnpm",
-    "node",
-    "@types/node"
-  ],
-  "labels": [
-    "dependencies"
-  ],
-  "enabledManagers": [
-    "npm",
-    "dockerfile",
-    "docker-compose",
-    "github-actions"
-  ]
-}

.github/workflows/ci.yaml

@@ -106,6 +106,8 @@ jobs:
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
         run: pnpm run lint:all
+      - name: Audit for vulnerabilities
+        run: pnpx audit-ci --config ./audit-ci.jsonc
 
   e2e:
     name: 'E2E (Package: ${{ matrix.package.path }})'
@@ -146,7 +148,7 @@ jobs:
         run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e tests
-        timeout-minutes: 15
+        timeout-minutes: 20
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
       - id: file-name
         if: ${{ failure() }}

.gitignore

@@ -23,7 +23,7 @@ node_modules/
 tmp/
 .pnpm-store
 .turbo
-.env
+.env*
 .secrets
 out/
 

.npmrc

@@ -1 +1,2 @@
-prefer-workspace-packages = true
+prefer-workspace-packages = true
+auto-install-peers = false

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  },
-  "eslint.workingDirectories": ["./dashboard"],
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

audit-ci.jsonc

@@ -0,0 +1,6 @@
+{
+  // $schema provides code completion hints to IDEs.
+  "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
+  "moderate": true,
+  "allowlist": ["trim-newlines"]
+}

dashboard/.env.example

@@ -16,3 +16,6 @@ NEXT_PUBLIC_STRIPE_PK=<nhost_stripe_public_key>
 NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>
 NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET=<nhost_bragi_websocket>
+
+CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret

dashboard/CHANGELOG.md

@@ -1,5 +1,103 @@
 # @nhost/dashboard
 
+## 1.6.1
+
+### Patch Changes
+
+- 8d91f71: chore: update deps and enable pnpm audit
+- 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in Dockerfile
+- Updated dependencies [8d91f71]
+  - @nhost/react-apollo@7.0.2
+  - @nhost/nextjs@2.0.2
+
+## 1.6.0
+
+### Minor Changes
+
+- 3ff1c2b53: fix: show upgrade option for pro projects
+
+## 1.5.0
+
+### Minor Changes
+
+- c2ef17c0a: feat: add support for new Team plan
+
+## 1.4.0
+
+### Minor Changes
+
+- 7883bbcbd: feat: don't show deprecated plans
+- 44be6dc0a: feat: set redirectTo during sign-in to support preview environments
+
+### Patch Changes
+
+- 3c3594898: fix: allow access to graphite when configured running in local dashboard
+- 32c246b7a: chore: update docs icon
+
+## 1.3.2
+
+### Patch Changes
+
+- 174b4165b: chore: use env variables when running graphql codegen
+- 7c977e714: chore: change `Allowed Roles` to `Default Allowed Roles`
+- 46f028b9f: fix: remove hardcoded ai version setting
+
+## 1.3.1
+
+### Patch Changes
+
+- af33c21d1: chore: remove backendUrl deprecation notice and remove all references to `providersUpdated`
+
+## 1.3.0
+
+### Minor Changes
+
+- 04784d880: Fix graphite's default version
+
+## 1.2.0
+
+### Minor Changes
+
+- 5733162ed: feat: add settings and ui for graphite
+
+## 1.1.0
+
+### Minor Changes
+
+- e2b79b5ec: chore: remove sharp from deps
+
+## 1.0.1
+
+### Patch Changes
+
+- @nhost/react-apollo@7.0.1
+- @nhost/nextjs@2.0.1
+
+## 1.0.0
+
+### Major Changes
+
+- bc9eff6e4: chore: remove support for using backendUrl when instantiating the Nhost client
+
+### Patch Changes
+
+- Updated dependencies [bc9eff6e4]
+  - @nhost/nextjs@2.0.0
+  - @nhost/react-apollo@7.0.0
+
+## 0.21.1
+
+### Patch Changes
+
+- 97ced73a3: fix(dashboard): prevent dashboard from resolving secrets
+
+## 0.21.0
+
+### Minor Changes
+
+- ed1a8d458: Update alert message on increasing PostgreSQL's volume capacity
+- 2e2248fd4: feat(dashboard): add SQL editor
+
 ## 0.20.28
 
 ### Patch Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:16-alpine AS pruner
+FROM node:18-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.10.11
+RUN yarn global add turbo@1.11.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -29,7 +29,7 @@ ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL_
 ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
 ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
-RUN yarn global add pnpm@8.6.2
+RUN yarn global add pnpm@8.10.5
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .
@@ -40,7 +40,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs

dashboard/e2e/account/pat/manage-pat.test.ts

@@ -27,7 +27,7 @@ test('should be able to create then delete a personal access token', async () =>
   const patName = faker.lorem.slug(3);
 
   await page.getByRole('textbox', { name: /name/i }).fill(patName);
-  await page.getByRole('button', { name: /expiration/i }).click();
+  await page.getByLabel('Expiration').click();
   await page.getByRole('option', { name: /7 days/i }).click();
   await page.getByRole('button', { name: /create/i }).click();
 

dashboard/e2e/database/create-table.test.ts

@@ -138,7 +138,8 @@ test('should create a table with an identity column', async () => {
     ],
   });
 
-  await page.getByRole('button', { name: /identity/i }).click();
+  // await page.getByRole('button', { name: /identity/i }).click();
+  await page.getByLabel('Identity').click();
   await page.getByRole('option', { name: /id/i }).click();
 
   // create table
@@ -194,26 +195,18 @@ test('should create table with foreign key constraint', async () => {
 
   await page.getByRole('button', { name: /add foreign key/i }).click();
 
-  // select column in current table
-  await page
-    .getByRole('button', { name: /column/i })
-    .first()
-    .click();
+  await page.locator('#columnName').click();
   await page.getByRole('option', { name: /author_id/i }).click();
 
   // select reference schema
-  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByLabel('Schema').click();
   await page.getByRole('option', { name: /public/i }).click();
 
   // select reference table
-  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByLabel('Table').click();
   await page.getByRole('option', { name: firstTableName, exact: true }).click();
 
-  // select reference column
-  await page
-    .getByRole('button', { name: /column/i })
-    .nth(1)
-    .click();
+  await page.locator('#referencedColumn').click();
   await page.getByRole('option', { name: /id/i }).click();
 
   await page.getByRole('button', { name: /add/i }).click();

dashboard/e2e/database/delete-table.test.ts

@@ -113,27 +113,21 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /add foreign key/i }).click();
 
   // select column in current table
-  await page
-    .getByRole('button', { name: /column/i })
-    .first()
-    .click();
+  await page.locator('#columnName').click();
+
   await page.getByRole('option', { name: /author_id/i }).click();
 
   // select reference schema
-  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByLabel('Schema').click();
   await page.getByRole('option', { name: /public/i }).click();
 
   // select reference table
-  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByLabel('Table').click();
   await page.getByRole('option', { name: firstTableName, exact: true }).click();
 
   // select reference column
-  await page
-    .getByRole('button', { name: /column/i })
-    .nth(1)
-    .click();
+  await page.locator('#referencedColumn').click();
   await page.getByRole('option', { name: /id/i }).click();
-
   await page.getByRole('button', { name: /add/i }).click();
 
   await expect(

dashboard/e2e/overview/overview.test.ts

@@ -30,7 +30,7 @@ test('should show a sidebar with menu items', async () => {
   const navLocator = page.getByRole('navigation', { name: /main navigation/i });
   await expect(navLocator).toBeVisible();
   await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    12,
+    13,
   );
   await expect(
     navLocator.getByRole('link', { name: /overview/i }),
@@ -93,7 +93,7 @@ test("should show the project's region and subdomain", async () => {
 
 test('should not have a GitHub repository connected', async () => {
   await expect(
-    page.getByRole('button', { name: /connect to github/i }),
+    page.getByRole('button', { name: /connect to github/i }).first(),
   ).toBeVisible();
 });
 

dashboard/e2e/utils.ts

@@ -116,7 +116,8 @@ export async function prepareTable({
   );
 
   // select the first column as primary key
-  await page.getByRole('button', { name: /primary key/i }).click();
+  // await page.getByRole('button', { name: /primary key/i }).click();
+  await page.getByLabel('Primary Key').click();
   await page.getByRole('option', { name: primaryKey, exact: true }).click();
 }
 

dashboard/graphite.graphql.config.yaml

@@ -0,0 +1,14 @@
+schema:
+  - https://local.graphql.nhost.run/v1:
+      headers:
+        x-hasura-admin-secret: nhost-admin-secret
+generates:
+  src/utils/__generated__/graphite.graphql.ts:
+    documents:
+      - 'src/gql/graphite/**/*.gql'
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      withRefetchFn: true

dashboard/graphql.config.yaml

@@ -1,12 +1,13 @@
 schema:
-  - https://local.graphql.nhost.run/v1:
+  - ${CODEGEN_GRAPHQL_URL}:
       headers:
-        x-hasura-admin-secret: nhost-admin-secret
+        x-hasura-admin-secret: ${CODEGEN_HASURA_ADMIN_SECRET}
 generates:
   src/utils/__generated__/graphql.ts:
     documents:
       - 'src/**/*.graphql'
       - 'src/**/*.gql'
+      - '!src/gql/graphite/**/*.gql'
     plugins:
       - 'typescript'
       - 'typescript-operations'

dashboard/hypertune.graphql

@@ -1,5 +0,0 @@
-query InitQuery {
-  root {
-    enableServices
-  }
-}

dashboard/hypertune.json

@@ -1,5 +0,0 @@
-{
-  "projectId": 2596,
-  "token": "U2FsdGVkX19+V8BJnVR0xLEC+42OW5qZl/A0i6beAaRmJoIhFh5Yf6eIKBzLbV9h",
-  "outputDirectoryPath": "src/hypertune"
-}

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.20.28",
+  "version": "1.6.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -10,150 +10,158 @@
     "start": "next start",
     "lint": "next lint --max-warnings 0",
     "test": "vitest",
-    "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
+    "codegen": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config graphql.config.yaml --errors-only",
+    "codegen-graphite": "graphql-codegen --config graphite.graphql.config.yaml --errors-only",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps",
-    "e2e": "pnpm install-browsers && pnpm dlx playwright@1.31.0 test"
+    "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
+    "e2e": "pnpm install-browsers && pnpm playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
-    "@codemirror/language": "^6.3.0",
-    "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.5",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.5",
-    "@fontsource/inter": "^5.0.0",
-    "@fontsource/roboto-mono": "^5.0.0",
-    "@graphiql/react": "^0.18.0",
-    "@graphiql/toolkit": "^0.8.2",
-    "@headlessui/react": "^1.6.5",
+    "@apollo/client": "^3.8.9",
+    "@codemirror/lang-sql": "^6.5.5",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/inter": "^5.0.16",
+    "@fontsource/roboto-mono": "^5.0.16",
+    "@graphiql/react": "^0.20.2",
+    "@graphiql/toolkit": "^0.9.1",
+    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^3.0.0",
-    "@mui/base": "^5.0.0-alpha.106",
-    "@mui/material": "^5.10.14",
-    "@mui/system": "^5.10.14",
-    "@mui/x-date-pickers": "^5.0.8",
+    "@hookform/resolvers": "^3.3.4",
+    "@mui/base": "5.0.0-beta.31",
+    "@mui/material": "^5.15.4",
+    "@mui/system": "^5.15.4",
+    "@mui/x-date-pickers": "^5.0.20",
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
-    "@segment/snippet": "^4.15.3",
-    "@stripe/react-stripe-js": "^2.0.0",
-    "@stripe/stripe-js": "^1.35.0",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tanstack/react-query": "^4.16.1",
-    "@tanstack/react-table": "^8.5.30",
-    "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "@segment/snippet": "^4.16.2",
+    "@stripe/react-stripe-js": "^2.4.0",
+    "@stripe/stripe-js": "^1.54.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-table": "^8.11.6",
+    "@tanstack/react-virtual": "^3.0.1",
+    "@uiw/codemirror-theme-github": "^4.21.21",
+    "@uiw/react-codemirror": "^4.21.21",
     "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
     "clsx": "^1.2.1",
-    "date-fns": "^2.29.3",
-    "generate-password": "^1.7.0",
-    "graphiql": "^3.0.0",
-    "graphql": "^16.6.0",
-    "graphql-request": "^6.0.0",
+    "date-fns": "^2.30.0",
+    "generate-password": "^1.7.1",
+    "graphiql": "^3.1.0",
+    "graphql": "16.8.1",
+    "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.11.2",
-    "hypertune": "^1.4.4",
-    "just-kebab-case": "^4.1.1",
+    "graphql-ws": "^5.14.3",
+    "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
-    "next": "^12.3.1",
-    "next-seo": "^6.0.0",
+    "next": "^14.0.4",
+    "next-seo": "^6.4.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
     "react": "18.2.0",
+    "react-children-utilities": "^2.10.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.0",
-    "react-hook-form": "^7.42.1",
-    "react-hot-toast": "^2.4.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.49.3",
+    "react-hot-toast": "^2.4.1",
+    "react-intersection-observer": "^9.5.3",
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
+    "react-markdown": "^9.0.1",
     "react-merge-refs": "^1.1.0",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-resizable-layout": "^0.7.2",
     "react-table": "^7.8.0",
-    "sharp": "^0.32.0",
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "shell-quote": "^1.8.1",
-    "slugify": "^1.6.5",
+    "slugify": "^1.6.6",
     "stripe": "^10.17.0",
-    "tailwind-merge": "^1.8.0",
+    "tailwind-merge": "^1.14.0",
     "utility-types": "^3.10.0",
-    "validator": "^13.7.0",
-    "yup": "^1.0.2",
+    "validator": "^13.11.0",
+    "yup": "^1.3.3",
     "yup-password": "^0.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.23.7",
     "@faker-js/faker": "^7.6.0",
-    "@graphql-codegen/cli": "^3.0.0",
-    "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-operations": "^3.0.0",
-    "@graphql-codegen/typescript-react-apollo": "^3.3.1",
-    "@next/bundle-analyzer": "^12.3.1",
-    "@playwright/test": "1.31.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-interactions": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
+    "@graphql-codegen/cli": "^3.3.1",
+    "@graphql-codegen/typescript": "^3.0.4",
+    "@graphql-codegen/typescript-operations": "^3.0.4",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
+    "@next/bundle-analyzer": "^12.3.4",
+    "@playwright/test": "1.41.0",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/typography": "^0.5.10",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/ace": "^0.0.48",
-    "@types/bcryptjs": "^2.4.2",
-    "@types/jest": "^29.5.3",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^16.11.7",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jest": "^29.5.11",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^16.18.70",
     "@types/pluralize": "^0.0.30",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-table": "^7.7.12",
-    "@types/shell-quote": "^1.7.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/validator": "^13.7.10",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^0.32.0",
-    "autoprefixer": "^10.4.13",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-table": "^7.7.19",
+    "@types/shell-quote": "^1.7.5",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/validator": "^13.11.8",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^0.32.4",
+    "autoprefixer": "^10.4.16",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "csstype": "^3.0.10",
-    "dotenv": "^16.0.3",
+    "csstype": "^3.1.3",
+    "dotenv": "^16.3.1",
     "encoding": "^0.1.13",
-    "eslint": "^8.28.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^13.0.2",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-next": "^13.5.6",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^22.0.0",
-    "lint-staged": ">=13",
-    "msw": "^1.0.1",
-    "msw-storybook-addon": "^1.6.3",
-    "node-fetch": "^3.3.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.4.0",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^15.2.0",
+    "msw": "^1.3.2",
+    "msw-storybook-addon": "^1.10.0",
+    "node-fetch": "^3.3.2",
+    "postcss": "^8.4.33",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
-    "storybook-addon-next-router": "^4.0.1",
-    "tailwindcss": "^3.1.2",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "vite": "^4.0.2",
-    "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.32.0"
+    "storybook-addon-next-router": "^4.0.2",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "vite": "^5.0.12",
+    "vite-tsconfig-paths": "^4.2.3",
+    "vitest": "^0.32.4"
   },
   "browserslist": {
     "production": [

dashboard/public/logos/Note.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6H10" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8H10" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H8" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.79289 13.5H3C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13V3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H13C13.1326 2.5 13.2598 2.55268 13.3536 2.64645C13.4473 2.74021 13.5 2.86739 13.5 3V9.79289C13.5 9.85855 13.4871 9.92357 13.4619 9.98423C13.4368 10.0449 13.4 10.1 13.3536 10.1464L10.1464 13.3536C10.1 13.4 10.0449 13.4368 9.98423 13.4619C9.92357 13.4871 9.85855 13.5 9.79289 13.5V13.5Z" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4548 9.99948H10V13.4545" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/public/logos/light/Note.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6H10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8H10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.79289 13.5H3C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13V3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H13C13.1326 2.5 13.2598 2.55268 13.3536 2.64645C13.4473 2.74021 13.5 2.86739 13.5 3V9.79289C13.5 9.85855 13.4871 9.92357 13.4619 9.98423C13.4368 10.0449 13.4 10.1 13.3536 10.1464L10.1464 13.3536C10.1 13.4 10.0449 13.4368 9.98423 13.4619C9.92357 13.4871 9.85855 13.5 9.79289 13.5V13.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4548 9.99948H10V13.4545" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/components/common/ContactUs/ContactUs.tsx

@@ -4,9 +4,17 @@ import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface ContactUsProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
+  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  isTeam?: boolean;
+  isOwner?: boolean;
+}
 
-export default function FeedbackForm({ className, ...props }: ContactUsProps) {
+export default function FeedbackForm({
+  className,
+  isTeam,
+  isOwner,
+  ...props
+}: ContactUsProps) {
   return (
     <div
       className={twMerge(
@@ -19,6 +27,30 @@ export default function FeedbackForm({ className, ...props }: ContactUsProps) {
         Contact us
       </Text>
 
+      {isTeam && isOwner && (
+        <Text>
+          If this is a new Team project, or you need to manage members, reach
+          out to us on discord or via email at{' '}
+          <Link
+            href="mailto:support@nhost.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+          >
+            support@nhost.io
+          </Link>{' '}
+          so we can have your dedicated channel set up.
+        </Text>
+      )}
+
+      {isTeam && !isOwner && (
+        <Text>
+          As part of a team plan you can reach out to us on the private channel
+          for this workspace. If you haven&apos;t been added to the channel, ask
+          the workspace owner to add you.
+        </Text>
+      )}
+
       <Text>
         To report issues with Nhost, please open a GitHub issue in the{' '}
         <Link

dashboard/src/components/common/DepricationNotice/DepricationNotice.tsx

@@ -1,28 +0,0 @@
-import { Alert } from '@/components/ui/v2/Alert';
-import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-
-export default function DepricationNotice() {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  return (
-    !currentProject?.providersUpdated && (
-      <Alert severity="warning" className="grid place-content-center">
-        <Text color="warning" className="max-w-3xl text-sm">
-          On December 1st the old backend domain will cease to work. You need to
-          make sure your client is instantiated using the subdomain and region
-          and update your oauth2 settings. You can find more information{' '}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-            href="https://github.com/nhost/nhost/discussions/2303"
-          >
-            here
-          </a>
-          .
-        </Text>
-      </Alert>
-    )
-  );
-}

dashboard/src/components/common/DepricationNotice/index.ts

@@ -1 +0,0 @@
-export { default as ContactUs } from './DepricationNotice';

dashboard/src/components/common/NavLink/NavLink.tsx

@@ -17,7 +17,7 @@ function NavLink(
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
   return (
-    <NextLink href={href} passHref>
+    <NextLink href={href} passHref legacyBehavior>
       <Link className={twMerge('font-display', className)} ref={ref} {...props}>
         {children}
       </Link>

dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx

@@ -26,7 +26,7 @@ export default function ThemeSwitcher({
         listbox: { className: 'min-w-0 w-full' },
         popper: {
           disablePortal: false,
-          className: 'z-[10000] w-[270px] w-full',
+          className: 'z-[10000] w-[270px]',
         },
       }}
     >

dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -9,10 +9,11 @@ import { ChangePlanModal } from '@/features/projects/common/components/ChangePla
 import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
 
 import Image from 'next/image';
+import { type ReactNode } from 'react';
 
 interface UpgradeToProBannerProps {
   title: string;
-  description: string;
+  description: string | ReactNode;
 }
 
 export default function UpgradeToProBanner({
@@ -25,7 +26,7 @@ export default function UpgradeToProBanner({
   return (
     <Box
       sx={{ backgroundColor: 'primary.light' }}
-      className="flex flex-col p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
+      className="flex flex-col justify-between p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
     >
       <div className="flex flex-col justify-between space-y-4">
         <div className="space-y-2">
@@ -39,7 +40,11 @@ export default function UpgradeToProBanner({
             </div>
           </div>
           <Text variant="h3">{title}</Text>
-          <Text>{description}</Text>
+          {typeof description === 'string' ? (
+            <Text>{description}</Text>
+          ) : (
+            description
+          )}
         </div>
 
         <div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
@@ -87,14 +92,13 @@ export default function UpgradeToProBanner({
         </div>
       </div>
 
-      <div className="max-w-xs mx-auto">
-        <Image
-          src="/illustration-unbox.png"
-          width={400}
-          height={260}
-          objectFit="contain"
-        />
-      </div>
+      <Image
+        src="/illustration-unbox.png"
+        width={300}
+        height={140}
+        objectFit="contain"
+        alt='Upgrade to Pro illustration'
+      />
     </Box>
   );
 }

dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx

@@ -8,7 +8,7 @@ import type {
   DataBrowserGridCellProps,
 } from '@/features/database/dataGrid/types/dataBrowser';
 import { triggerToast } from '@/utils/toast';
-import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import type { FocusEvent, JSXElementConstructor, KeyboardEvent, MouseEvent, ReactElement, ReactNode, ReactPortal } from 'react';
 import {
   Children,
   cloneElement,
@@ -320,7 +320,7 @@ function DataGridCellContent<TData extends object = {}, TValue = unknown>({
       sx={{ backgroundColor: 'transparent' }}
       {...props}
     >
-      {Children.map(children, (child) => {
+      {Children.map(children, (child: ReactNode | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>>) => {
         if (!isValidElement(child)) {
           return null;
         }

dashboard/src/components/layout/AILayout/AILayout.tsx

@@ -0,0 +1,46 @@
+import { AISidebar } from '@/components/layout/AISidebar';
+import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
+import { ProjectLayout } from '@/components/layout/ProjectLayout';
+import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { Box } from '@/components/ui/v2/Box';
+import { twMerge } from 'tailwind-merge';
+
+export interface AILayoutProps extends ProjectLayoutProps {
+  /**
+   * Props passed to the sidebar component.
+   */
+  sidebarProps?: SettingsSidebarProps;
+}
+
+export default function AILayout({
+  children,
+  mainContainerProps: {
+    className: mainContainerClassName,
+    ...mainContainerProps
+  } = {},
+  sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
+  ...props
+}: AILayoutProps) {
+  return (
+    <ProjectLayout
+      mainContainerProps={{
+        className: twMerge('flex h-full', mainContainerClassName),
+        ...mainContainerProps,
+      }}
+      {...props}
+    >
+      <AISidebar
+        className={twMerge('w-full max-w-sidebar', sidebarClassName)}
+        {...sidebarProps}
+      />
+
+      <Box
+        sx={{ backgroundColor: 'background.default' }}
+        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
+      >
+        <RetryableErrorBoundary>{children}</RetryableErrorBoundary>
+      </Box>
+    </ProjectLayout>
+  );
+}

dashboard/src/components/layout/AILayout/index.ts

@@ -0,0 +1,2 @@
+export * from './AILayout';
+export { default as SettingsLayout } from './AILayout';

dashboard/src/components/layout/AISidebar/AISidebar.tsx

@@ -0,0 +1,143 @@
+import { NavLink } from '@/components/common/NavLink';
+import { Backdrop } from '@/components/ui/v2/Backdrop';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { List } from '@/components/ui/v2/List';
+import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface AISidebarProps extends Omit<BoxProps, 'children'> {}
+
+interface AINavLinkProps extends ListItemButtonProps {
+  /**
+   * Link to navigate to.
+   */
+  href: string;
+  /**
+   * Determines whether or not the link should be active if it's href exactly
+   * matches the current route.
+   *
+   * @default true
+   */
+  exact?: boolean;
+}
+
+function AINavLink({ exact = true, href, children, ...props }: AINavLinkProps) {
+  const router = useRouter();
+  const baseUrl = `/${router.query.workspaceSlug}/${router.query.appSlug}/ai`;
+  const finalUrl = href && href !== '/' ? `${baseUrl}${href}` : baseUrl;
+
+  const active = exact
+    ? router.asPath === finalUrl
+    : router.asPath.startsWith(finalUrl);
+
+  return (
+    <ListItem.Root>
+      <ListItem.Button
+        dense
+        href={finalUrl}
+        component={NavLink}
+        selected={active}
+        {...props}
+      >
+        <ListItem.Text>{children}</ListItem.Text>
+      </ListItem.Button>
+    </ListItem.Root>
+  );
+}
+
+export default function AISidebar({ className, ...props }: AISidebarProps) {
+  const [expanded, setExpanded] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  function toggleExpanded() {
+    setExpanded(!expanded);
+  }
+
+  function handleSelect() {
+    setExpanded(false);
+  }
+
+  function closeSidebarWhenEscapeIsPressed(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      setExpanded(false);
+    }
+  }
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.addEventListener('keydown', closeSidebarWhenEscapeIsPressed);
+    }
+
+    return () =>
+      document.removeEventListener('keydown', closeSidebarWhenEscapeIsPressed);
+  }, []);
+
+  if (!currentProject) {
+    return null;
+  }
+
+  return (
+    <>
+      <Backdrop
+        open={expanded}
+        className="absolute top-0 left-0 bottom-0 right-0 z-[34] md:hidden"
+        role="button"
+        tabIndex={-1}
+        onClick={() => setExpanded(false)}
+        aria-label="Close sidebar overlay"
+        onKeyDown={(event) => {
+          if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+          }
+
+          setExpanded(false);
+        }}
+      />
+
+      <Box
+        component="aside"
+        className={twMerge(
+          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pt-2 pb-17 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+          className,
+        )}
+        {...props}
+      >
+        <nav aria-label="Settings navigation">
+          <List className="grid gap-2">
+            <AINavLink
+              href="/auto-embeddings"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Auto-Embeddings
+            </AINavLink>
+            <AINavLink href="/assistants" exact={false} onClick={handleSelect}>
+              Assistants
+            </AINavLink>
+          </List>
+        </nav>
+      </Box>
+
+      <IconButton
+        className="absolute bottom-4 left-4 z-[38] h-11 w-11 rounded-full md:hidden"
+        onClick={toggleExpanded}
+        aria-label="Toggle sidebar"
+      >
+        <Image
+          width={16}
+          height={16}
+          src="/assets/table.svg"
+          alt="A monochrome table"
+        />
+      </IconButton>
+    </>
+  );
+}

dashboard/src/components/layout/AISidebar/index.ts

@@ -0,0 +1,2 @@
+export * from './AISidebar';
+export { default as AISidebar } from './AISidebar';

dashboard/src/components/layout/Header/Header.tsx

@@ -1,4 +1,5 @@
 import { ContactUs } from '@/components/common/ContactUs';
+import { useDialog } from '@/components/common/DialogProvider';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
@@ -6,14 +7,20 @@ import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
 import { MobileNav } from '@/components/layout/MobileNav';
 import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
 import { Chip } from '@/components/ui/v2/Chip';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
+import { DevAssistant } from '@/features/ai/DevAssistant';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { ApplicationStatus } from '@/types/application';
+import { getToastStyleProps } from '@/utils/constants/settings';
 import { useRouter } from 'next/router';
 import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
 import { useEffect } from 'react';
+import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 
 export interface HeaderProps
@@ -23,9 +30,16 @@ export interface HeaderProps
 
 export default function Header({ className, ...props }: HeaderProps) {
   const router = useRouter();
+
   const isPlatform = useIsPlatform();
+
+  const { openDrawer } = useDialog();
+
   const { currentProject, refetch: refetchProject } =
     useCurrentWorkspaceAndProject();
+
+  const isOwner = useIsCurrentUserOwner();
+
   const isProjectUpdating =
     currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;
 
@@ -44,6 +58,23 @@ export default function Header({ className, ...props }: HeaderProps) {
     };
   }, [isProjectUpdating, refetchProject]);
 
+  const openDevAssistant = () => {
+    // The dev assistant can be only answer questions related to a particular project
+    if (!currentProject) {
+      toast.error('You need to be inside a project to open the Assistant', {
+        style: getToastStyleProps().style,
+        ...getToastStyleProps().error,
+      });
+
+      return;
+    }
+
+    openDrawer({
+      title: <GraphiteIcon />,
+      component: <DevAssistant />,
+    });
+  };
+
   return (
     <Box
       component="header"
@@ -54,7 +85,7 @@ export default function Header({ className, ...props }: HeaderProps) {
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="grid grid-flow-col items-center gap-3 ">
+      <div className="grid grid-flow-col items-center gap-3">
         <NavLink href="/" className="w-12">
           <Logo className="mx-auto cursor-pointer" />
         </NavLink>
@@ -69,6 +100,10 @@ export default function Header({ className, ...props }: HeaderProps) {
       </div>
 
       <div className="hidden grid-flow-col items-center gap-2 sm:grid">
+        <Button className="rounded-full" onClick={openDevAssistant}>
+          <GraphiteIcon />
+        </Button>
+
         {isPlatform && (
           <Dropdown.Root>
             <Dropdown.Trigger
@@ -82,7 +117,11 @@ export default function Header({ className, ...props }: HeaderProps) {
               transformOrigin={{ vertical: 'top', horizontal: 'right' }}
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             >
-              <ContactUs className="max-w-md" />
+              <ContactUs
+                className="max-w-md"
+                isTeam={currentProject?.plan?.name === 'Team'}
+                isOwner={isOwner}
+              />
             </Dropdown.Content>
           </Dropdown.Root>
         )}

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,4 +1,3 @@
-import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
@@ -50,7 +49,6 @@ export default function SettingsLayout({
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">
-            <DepricationNotice />
             {hasGitRepo && (
               <Alert
                 severity="warning"

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -208,6 +208,9 @@ export default function SettingsSidebar({
             >
               Custom Domains
             </SettingsNavLink>
+            <SettingsNavLink href="/ai" exact={false} onClick={handleSelect}>
+              AI
+            </SettingsNavLink>
           </List>
         </nav>
       </Box>

dashboard/src/components/settings/ProvidersUpdatedAlert.tsx

@@ -1,100 +0,0 @@
-import { useDialog } from '@/components/common/DialogProvider';
-import { Alert } from '@/components/ui/v2/Alert';
-import { Button } from '@/components/ui/v2/Button';
-import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
-import { Link } from '@/components/ui/v2/Link';
-import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { useConfirmProvidersUpdatedMutation } from '@/utils/__generated__/graphql';
-import { useTheme } from '@mui/material';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-
-export default function ProvidersUpdatedAlert() {
-  const theme = useTheme();
-  const { openAlertDialog } = useDialog();
-  const [confirmed, setConfirmed] = useState(true);
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const [confirmProvidersUpdated] = useConfirmProvidersUpdatedMutation({
-    variables: { id: currentProject?.id },
-  });
-
-  async function handleSubmitConfirmation() {
-    const confirmProvidersUpdatedPromise = confirmProvidersUpdated();
-
-    await toast.promise(
-      confirmProvidersUpdatedPromise,
-      {
-        loading: 'Confirming...',
-        success: 'Your settings have been updated successfully.',
-        error: 'An error occurred while trying to confirm the message.',
-      },
-      getToastStyleProps(),
-    );
-
-    setConfirmed(false);
-  }
-
-  function handleOpenConfirmationDialog() {
-    openAlertDialog({
-      title: 'Confirm all providers updated?',
-      payload: (
-        <Text variant="subtitle1" component="span">
-          Please make sure to update all providers before continuing. Your
-          sign-in flows might break if you don&apos;t.
-        </Text>
-      ),
-      props: {
-        onPrimaryAction: handleSubmitConfirmation,
-      },
-    });
-  }
-
-  if (!confirmed) {
-    return null;
-  }
-
-  return (
-    <Alert
-      severity="warning"
-      className="grid items-center grid-flow-row gap-2 p-4 place-items-center lg:grid-flow-col lg:place-content-between"
-    >
-      <div className="grid grid-flow-row gap-1 text-left">
-        <Text className="font-semibold">
-          Please update the Redirect URL for all providers being used
-        </Text>
-
-        <Text className="text-sm+">
-          We are deprecating your project&apos;s old DNS name in favor of
-          individual DNS names for each service. Please make sure to update your
-          providers to use the new auth specific URL under <b>Redirect URL</b>{' '}
-          before the 1st of February 2023.{' '}
-          <Link
-            href="https://github.com/nhost/nhost/discussions/1319"
-            target="_blank"
-            rel="noopener noreferrer"
-            underline="hover"
-            className="font-medium"
-          >
-            Read the discussion here.
-            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
-          </Link>
-        </Text>
-      </div>
-
-      <Button
-        variant="borderless"
-        className={
-          theme.palette.mode === 'dark'
-            ? 'text-white hover:bg-brown'
-            : 'text-black hover:bg-orange-300'
-        }
-        onClick={handleOpenConfirmationDialog}
-      >
-        I have updated all Redirect URLs
-      </Button>
-    </Alert>
-  );
-}

dashboard/src/components/settings/index.ts

@@ -1 +0,0 @@
-export { default as ProvidersUpdatedAlert } from './ProvidersUpdatedAlert';

dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx

@@ -8,9 +8,9 @@ import { Input, inputClasses } from '@/components/ui/v2/Input';
 import { OptionBase } from '@/components/ui/v2/Option';
 import { OptionGroupBase } from '@/components/ui/v2/OptionGroup';
 import type { StyledComponent } from '@emotion/styled';
-import type { UseAutocompleteProps } from '@mui/base/AutocompleteUnstyled';
-import { createFilterOptions } from '@mui/base/AutocompleteUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+import type { UseAutocompleteProps } from '@mui/base/useAutocomplete';
+import { createFilterOptions } from '@mui/base/useAutocomplete';
+import { Popper } from '@mui/base'
 import { styled } from '@mui/material';
 import type { AutocompleteProps as MaterialAutocompleteProps } from '@mui/material/Autocomplete';
 import MaterialAutocomplete, {
@@ -142,7 +142,7 @@ const StyledOptionBase = styled(OptionBase)(({ theme }) => ({
   gap: theme.spacing(0.5),
 }));
 
-export const AutocompletePopper = styled(PopperUnstyled)(({ theme }) => ({
+export const AutocompletePopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.modal + 1,
   boxShadow: 'none',
   minWidth: 320,

dashboard/src/components/ui/v2/Box/Box.tsx

@@ -1,9 +1,7 @@
 import { styled } from '@mui/material';
-import type {
-  BoxProps as MaterialBoxProps,
-  BoxTypeMap,
-} from '@mui/material/Box';
+import type { BoxProps as MaterialBoxProps } from '@mui/material/Box';
 import MaterialBox from '@mui/material/Box';
+import { type BoxTypeMap } from '@mui/system';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 

dashboard/src/components/ui/v2/Chip/Chip.tsx

@@ -10,7 +10,7 @@ export interface ChipProps extends MaterialChipProps {
   /**
    * Custom component for the root node.
    */
-  component?: string | ElementType;
+  component?: ElementType;
 }
 
 const Chip = styled(MaterialChip)<ChipProps>(({ theme }) => ({

dashboard/src/components/ui/v2/HelperText/HelperText.tsx

@@ -7,7 +7,7 @@ export interface HelperTextProps extends MaterialFormHelperTextProps {
   /**
    * Custom component for the root node.
    */
-  component?: string | ElementType;
+  component?: ElementType;
 }
 
 const HelperText = styled(MaterialFormHelperText)<HelperTextProps>({

dashboard/src/components/ui/v2/Option/Option.tsx

@@ -1,41 +1,42 @@
-import type { OptionUnstyledProps } from '@mui/base/OptionUnstyled';
-import OptionUnstyled, {
-  optionUnstyledClasses,
-} from '@mui/base/OptionUnstyled';
+import {
+  Option as BaseOption,
+  optionClasses as baseOptionClasses,
+  type OptionProps as BaseOptionProps,
+} from '@mui/base';
 import { darken, styled } from '@mui/material';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import OptionBase from './OptionBase';
 
 export interface OptionProps<TValue extends {}>
-  extends OptionUnstyledProps<TValue> {}
+  extends BaseOptionProps<TValue> {}
 
-const StyledOption = styled(OptionUnstyled)(({ theme }) => ({
+const StyledOption = styled(BaseOption)(({ theme }) => ({
   transition: theme.transitions.create(['background-color']),
   color: theme.palette.text.primary,
-  [`&.${optionUnstyledClasses.selected}`]: {
+  [`&.${baseOptionClasses.selected}`]: {
     backgroundColor:
       theme.palette.mode === 'dark'
         ? `${darken(theme.palette.action.hover, 0.1)} !important`
         : `${darken(theme.palette.action.hover, 0.05)} !important`,
   },
-  [`&.${optionUnstyledClasses.selected}:hover, &.${optionUnstyledClasses.selected}.${optionUnstyledClasses.highlighted}`]:
+  [`&.${baseOptionClasses.selected}:hover, &.${baseOptionClasses.selected}.${baseOptionClasses.highlighted}`]:
     {
       backgroundColor:
         theme.palette.mode === 'dark'
           ? `${darken(theme.palette.action.hover, 0.25)} !important`
           : `${darken(theme.palette.action.hover, 0.075)} !important`,
     },
-  [`&.${optionUnstyledClasses.highlighted}, &:hover`]: {
+  [`&.${baseOptionClasses.highlighted}, &:hover`]: {
     backgroundColor:
       theme.palette.mode === 'dark'
         ? `${darken(theme.palette.action.hover, 0.15)} !important`
         : `${theme.palette.action.hover} !important`,
   },
-  [`&.${optionUnstyledClasses.disabled}`]: {
+  [`&.${baseOptionClasses.disabled}`]: {
     color: theme.palette.text.disabled,
   },
-  [`&.${optionUnstyledClasses.disabled}:hover`]: {
+  [`&.${baseOptionClasses.disabled}:hover`]: {
     backgroundColor: 'transparent !important',
   },
 }));

dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx

@@ -1,11 +1,13 @@
-import type { OptionGroupUnstyledProps } from '@mui/base/OptionGroupUnstyled';
-import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled';
+import {
+  OptionGroup as BaseOptionGroup,
+  type OptionGroupProps as BaseOptionGroupProps,
+} from '@mui/base';
 import { styled } from '@mui/material';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import OptionGroupBase from './OptionGroupBase';
 
-export interface OptionGroupProps extends OptionGroupUnstyledProps {}
+export interface OptionGroupProps extends BaseOptionGroupProps {}
 
 const StyledGroupRoot = styled('li')(({ theme }) => ({
   listStyle: 'none',
@@ -25,7 +27,7 @@ function OptionGroup(
     ...externalSlots,
   };
 
-  return <OptionGroupUnstyled {...props} ref={ref} slots={slots} />;
+  return <BaseOptionGroup {...props} ref={ref} slots={slots} />;
 }
 
 OptionGroup.displayName = 'NhostOptionGroup';

dashboard/src/components/ui/v2/Select/Select.tsx

@@ -1,9 +1,9 @@
 import type { FormControlProps } from '@/components/ui/v2/FormControl';
 import { FormControl } from '@/components/ui/v2/FormControl';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-import type { SelectUnstyledProps } from '@mui/base/SelectUnstyled';
-import SelectUnstyled from '@mui/base/SelectUnstyled';
-import { styled } from '@mui/material';
+import { Popper as BasePopper } from '@mui/base/Popper';
+import type { SelectProps as BaseSelectProps } from '@mui/base/Select';
+import { Select as BaseSelect } from '@mui/base/Select';
+import { styled } from '@mui/system';
 import clsx from 'clsx';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
@@ -11,7 +11,7 @@ import type { ToggleButtonProps } from './ToggleButton';
 import ToggleButton from './ToggleButton';
 
 export interface SelectProps<TValue extends {}>
-  extends SelectUnstyledProps<TValue>,
+  extends BaseSelectProps<TValue, false>,
     Pick<
       FormControlProps,
       | 'fullWidth'
@@ -25,7 +25,7 @@ export interface SelectProps<TValue extends {}>
   /**
    * Props for component slots.
    */
-  slotProps?: SelectUnstyledProps<TValue>['slotProps'] & {
+  slotProps?: BaseSelectProps<TValue, false>['slotProps'] & {
     root?: Partial<PropsWithoutRef<ToggleButtonProps>>;
     label?: Partial<FormControlProps['labelProps']>;
     formControl?: Partial<FormControlProps>;
@@ -59,8 +59,8 @@ const StyledListbox = styled('ul')(({ theme }) => ({
   },
 }));
 
-const StyledPopper = styled(PopperUnstyled)`
-  z-index: 10;
+const StyledPopper = styled(BasePopper)`
+  z-index: 9999;
 `;
 
 function Select<TValue>(
@@ -80,7 +80,7 @@ function Select<TValue>(
   }: SelectProps<TValue>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const slots: SelectUnstyledProps<TValue>['slots'] = {
+  const slots: BaseSelectProps<TValue, false>['slots'] = {
     root: ToggleButton,
     popper: StyledPopper,
     listbox: StyledListbox,
@@ -107,7 +107,7 @@ function Select<TValue>(
         htmlFor: props.id,
       }}
     >
-      <SelectUnstyled
+      <BaseSelect
         aria-label={typeof label === 'string' ? label : undefined}
         {...props}
         className={clsx(error && 'error')}
@@ -117,7 +117,6 @@ function Select<TValue>(
           ...slotProps,
           root: {
             ...slotProps?.root,
-            placeholder,
           },
           listbox: {
             ...slotProps?.listbox,
@@ -132,7 +131,7 @@ function Select<TValue>(
         placeholder={placeholder}
       >
         {children}
-      </SelectUnstyled>
+      </BaseSelect>
     </FormControl>
   );
 }

dashboard/src/components/ui/v2/Select/ToggleButton.tsx

@@ -1,8 +1,10 @@
 import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
 import { ChevronUpIcon } from '@/components/ui/v2/icons/ChevronUpIcon';
-import type { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
-import ButtonUnstyled from '@mui/base/ButtonUnstyled';
-import { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
+import {
+  Button as ButtonUnstyled,
+  type ButtonProps as ButtonUnstyledProps,
+} from '@mui/base';
+import { selectClasses as selectUnstyledClasses } from '@mui/base/Select';
 import type { SxProps } from '@mui/material';
 import { styled } from '@mui/material';
 import type { Theme } from '@mui/system';
@@ -24,6 +26,7 @@ export interface ToggleButtonProps
       Omit<DetailedHTMLProps<HTMLProps<HTMLSpanElement>, HTMLSpanElement>, 'as'>
     >;
   };
+  placeholder?: string;
 }
 
 const StyledButton = styled(ButtonUnstyled)(({ theme }) => ({

dashboard/src/components/ui/v2/Switch/Switch.tsx

@@ -1,14 +1,15 @@
 import type { FormControlLabelProps } from '@/components/ui/v2/FormControlLabel';
 import { FormControlLabel } from '@/components/ui/v2/FormControlLabel';
-import SwitchUnstyled, {
-  switchUnstyledClasses,
-} from '@mui/base/SwitchUnstyled';
-import type { SwitchUnstyledProps } from '@mui/base/SwitchUnstyled/SwitchUnstyled.types';
+import {
+  Switch as BaseSwitch,
+  switchClasses as baseSwitchClasses,
+} from '@mui/base';
+import type { SwitchProps as BaseSwitchProps } from '@mui/base/Switch';
 import { styled } from '@mui/material';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
-export interface SwitchProps extends SwitchUnstyledProps {
+export interface SwitchProps extends BaseSwitchProps {
   /**
    * Label to be displayed next to the checkbox.
    */
@@ -16,11 +17,11 @@ export interface SwitchProps extends SwitchUnstyledProps {
   /**
    * Props to be passed to the internal components.
    */
-  slotProps?: SwitchUnstyledProps['slotProps'] & {
+  slotProps?: BaseSwitchProps['slotProps'] & {
     /**
      * Props to be passed to the `Switch` component.
      */
-    root?: Partial<SwitchUnstyledProps>;
+    root?: Partial<BaseSwitchProps>;
     /**
      * Props to be passed to the `FormControlLabel` component.
      */
@@ -35,23 +36,23 @@ const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
   justifyContent: 'start',
 }));
 
-const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
+const StyledSwitch = styled(BaseSwitch)(({ theme }) => ({
   position: 'relative',
   display: 'inline-block',
   width: '40px',
   height: '24px',
   cursor: 'pointer',
 
-  [`&.${switchUnstyledClasses.disabled}`]: {
+  [`&.${baseSwitchClasses.disabled}`]: {
     cursor: 'not-allowed',
 
-    [`& .${switchUnstyledClasses.track}`]: {
+    [`& .${baseSwitchClasses.track}`]: {
       backgroundColor: theme.palette.grey[200],
       color: theme.palette.grey[200],
     },
   },
 
-  [`& .${switchUnstyledClasses.track}`]: {
+  [`& .${baseSwitchClasses.track}`]: {
     backgroundColor:
       theme.palette.mode === 'dark'
         ? theme.palette.grey[500]
@@ -63,7 +64,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
     position: 'absolute',
   },
 
-  [` & .${switchUnstyledClasses.thumb}`]: {
+  [` & .${baseSwitchClasses.thumb}`]: {
     display: 'block',
     width: '18px',
     height: '18px',
@@ -77,24 +78,24 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
     transitionDuration: '120ms',
   },
 
-  [`&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb}`]: {
+  [`&.${baseSwitchClasses.focusVisible} .${baseSwitchClasses.thumb}`]: {
     backgroundColor: theme.palette.action.focus,
     boxShadow: '0 0 1px 8px rgba(0, 0, 0, 0.25)',
   },
 
-  [`&.${switchUnstyledClasses.checked}`]: {
-    [`.${switchUnstyledClasses.thumb}`]: {
+  [`&.${baseSwitchClasses.checked}`]: {
+    [`.${baseSwitchClasses.thumb}`]: {
       left: '19px',
       top: '3px',
       backgroundColor: theme.palette.common.white,
     },
 
-    [`.${switchUnstyledClasses.track}`]: {
+    [`.${baseSwitchClasses.track}`]: {
       backgroundColor: theme.palette.primary.main,
     },
 
-    [`&.${switchUnstyledClasses.disabled}`]: {
-      [`.${switchUnstyledClasses.track}`]: {
+    [`&.${baseSwitchClasses.disabled}`]: {
+      [`.${baseSwitchClasses.track}`]: {
         opacity: 0.5,
         backgroundColor:
           theme.palette.mode === 'dark'
@@ -104,7 +105,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
     },
   },
 
-  [`& .${switchUnstyledClasses.input}`]: {
+  [`& .${baseSwitchClasses.input}`]: {
     cursor: 'inherit',
     position: 'absolute',
     width: '100%',

dashboard/src/components/ui/v2/icons/AIIcon/index.ts

@@ -0,0 +1 @@
+export { default as AIIcon } from './AIIcon';

dashboard/src/components/ui/v2/icons/ArrowElbowRightUp/ArrowElbowRightUp.tsx

@@ -0,0 +1,32 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function ArrowElbowRightUp(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8 6L11 3L14 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 12H11V3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </SvgIcon>
+  );
+}
+
+ArrowElbowRightUp.displayName = 'NhostArrowElbowRightUp';
+
+export default ArrowElbowRightUp;

dashboard/src/components/ui/v2/icons/ArrowElbowRightUp/index.ts

@@ -0,0 +1 @@
+export { default as ArrowElbowRightUp } from './ArrowElbowRightUp';

dashboard/src/components/ui/v2/icons/EmbeddingsIcon/EmbeddingsIcons.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function EmbeddingsIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="17"
+      height="17"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 17 17"
+      fill="none"
+      aria-label="Embeddings Icon"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.178057 4.04687L4.04687 0.178057C4.28428 -0.0593522 4.6692 -0.0593522 4.90661 0.178057L8.77542 4.04687C9.01283 4.28428 9.01283 4.6692 8.77542 4.90661C8.53801 5.14402 8.15309 5.14402 7.91568 4.90661L5.08466 2.07559L5.08466 12.7664H3.86881L3.86881 2.07559L1.03779 4.90661C0.800384 5.14402 0.415467 5.14402 0.178057 4.90661C-0.0593524 4.6692 -0.0593524 4.28428 0.178057 4.04687Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.9531 8.22458L16.8219 12.0934C17.0594 12.3308 17.0594 12.7157 16.8219 12.9531L12.9531 16.8219C12.7157 17.0594 12.3308 17.0594 12.0934 16.8219C11.856 16.5845 11.856 16.1996 12.0934 15.9622L14.9244 13.1312H4.23357V11.9153H14.9244L12.0934 9.08432C11.856 8.84691 11.856 8.46199 12.0934 8.22458C12.3308 7.98717 12.7157 7.98717 12.9531 8.22458Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+EmbeddingsIcon.displayName = 'NhostEmbeddingsIcon';
+
+export default EmbeddingsIcon;

dashboard/src/components/ui/v2/icons/EmbeddingsIcon/index.ts

@@ -0,0 +1 @@
+export { default as EmbeddingsIcon } from './EmbeddingsIcons';

dashboard/src/components/ui/v2/icons/GraphiteIcon/GraphiteIcon.tsx

@@ -0,0 +1,36 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function GraphiteIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="22"
+      height="25"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 22 25"
+      aria-label="Graphite"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.39873 13.0137C12.2825 13.0137 14.6203 10.7138 14.6203 7.87671C14.6203 5.03963 12.2825 2.73973 9.39873 2.73973C6.51497 2.73973 4.17722 5.03963 4.17722 7.87671C4.17722 10.7138 6.51497 13.0137 9.39873 13.0137ZM9.39873 15.7534C13.8205 15.7534 17.4051 12.2269 17.4051 7.87671C17.4051 3.52652 13.8205 0 9.39873 0C4.97696 0 1.39241 3.52652 1.39241 7.87671C1.39241 12.2269 4.97696 15.7534 9.39873 15.7534Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.78481 15.7534C2.78481 19.3471 5.74597 22.2603 9.39873 22.2603C13.0515 22.2603 16.0127 19.3471 16.0127 15.7534H18.7975C18.7975 20.8602 14.5895 25 9.39873 25C4.20796 25 0 20.8602 0 15.7534H2.78481Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.37975 1.36986C7.37975 0.613309 8.00315 0 8.77215 0H20.6076C21.3766 0 22 0.613309 22 1.36986C22 2.12642 21.3766 2.73973 20.6076 2.73973H8.77215C8.00315 2.73973 7.37975 2.12642 7.37975 1.36986Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+GraphiteIcon.displayName = 'NhostGraphiteIcon';
+
+export default GraphiteIcon;

dashboard/src/components/ui/v2/icons/GraphiteIcon/index.ts

@@ -0,0 +1 @@
+export { default as GraphiteIcon } from './GraphiteIcon';

dashboard/src/components/ui/v2/icons/TerminalIcon/TerminalIcon.tsx

@@ -0,0 +1,26 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function TerminalIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Trash"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.49851 3.43968L2.93795 2.94141L1.94141 4.06252L2.50196 4.56079L6.37134 8.00024L2.50196 11.4397L1.94141 11.938L2.93795 13.0591L3.49851 12.5608L7.99851 8.56079C8.15863 8.41847 8.25024 8.21446 8.25024 8.00024C8.25024 7.78601 8.15863 7.582 7.99851 7.43968L3.49851 3.43968ZM7.99987 11.2502H7.24987V12.7502H7.99987H13.9999H14.7499V11.2502H13.9999H7.99987Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+TerminalIcon.displayName = 'NhostTerminalIcon';
+
+export default TerminalIcon;

dashboard/src/components/ui/v2/icons/TerminalIcon/index.ts

@@ -0,0 +1 @@
+export { default as TerminalIcon } from './TerminalIcon';

dashboard/src/features/ai/AssistantForm/AssistantForm.tsx

@@ -0,0 +1,345 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Form } from '@/components/form/Form';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowsClockwise } from '@/components/ui/v2/icons/ArrowsClockwise';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { GraphqlDataSourcesFormSection } from '@/features/ai/AssistantForm/components/GraphqlDataSourcesFormSection';
+import { WebhooksDataSourcesFormSection } from '@/features/ai/AssistantForm/components/WebhooksDataSourcesFormSection';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import type { DialogFormProps } from '@/types/common';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { removeTypename, type DeepRequired } from '@/utils/helpers';
+import {
+  useInsertAssistantMutation,
+  useUpdateAssistantMutation,
+} from '@/utils/__generated__/graphite.graphql';
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  type ApolloError,
+} from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  name: Yup.string().required('The name is required.'),
+  description: Yup.string(),
+  instructions: Yup.string().required('The instructions are required'),
+  model: Yup.string().required('The model is required'),
+  graphql: Yup.array().of(
+    Yup.object().shape({
+      name: Yup.string().required(),
+      description: Yup.string().required(),
+      query: Yup.string().required(),
+      arguments: Yup.array().of(
+        Yup.object().shape({
+          name: Yup.string().required(),
+          description: Yup.string().required(),
+          type: Yup.string().required(),
+          required: Yup.bool().required(),
+        }),
+      ),
+    }),
+  ),
+  webhooks: Yup.array().of(
+    Yup.object().shape({
+      name: Yup.string().required(),
+      description: Yup.string().required(),
+      URL: Yup.string().required(),
+      arguments: Yup.array().of(
+        Yup.object().shape({
+          name: Yup.string().required(),
+          description: Yup.string().required(),
+          type: Yup.string().required(),
+          required: Yup.bool().required(),
+        }),
+      ),
+    }),
+  ),
+});
+
+export type AssistantFormValues = Yup.InferType<typeof validationSchema>;
+
+export interface AssistantFormProps extends DialogFormProps {
+  /**
+   * To use in conjunction with initialData to allow for updating the autoEmbeddingsConfiguration
+   */
+  assistantId?: string;
+
+  /**
+   * if there is initialData then it's an update operation
+   */
+  initialData?: AssistantFormValues;
+
+  /**
+   * Function to be called when the operation is cancelled.
+   */
+  onCancel?: VoidFunction;
+  /**
+   * Function to be called when the submit is successful.
+   */
+  onSubmit?: VoidFunction | ((args?: any) => Promise<any>);
+}
+
+export default function AssistantForm({
+  assistantId,
+  initialData,
+  onSubmit,
+  onCancel,
+  location,
+}: AssistantFormProps) {
+  const { onDirtyStateChange } = useDialog();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const serviceUrl = generateAppServiceUrl(
+    currentProject?.subdomain,
+    currentProject?.region,
+    'graphql',
+  );
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: serviceUrl,
+      headers: {
+        'x-hasura-admin-secret':
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? getHasuraAdminSecret()
+            : currentProject?.config?.hasura.adminSecret,
+      },
+    }),
+  });
+
+  const [insertAssistantMutation] = useInsertAssistantMutation({
+    client,
+  });
+
+  const [updateAssistantMutation] = useUpdateAssistantMutation({ client });
+
+  const form = useForm<AssistantFormValues>({
+    defaultValues: initialData,
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  const {
+    register,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = form;
+
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
+  const createOrUpdateAutoEmbeddings = async (
+    values: DeepRequired<AssistantFormValues> & { assistantID: string },
+  ) => {
+    // remove any __typename from the form values
+    const payload = removeTypename(values);
+
+    if (values.webhooks.length === 0) {
+      delete payload.webhooks;
+    }
+
+    if (values.graphql.length === 0) {
+      delete payload.graphql;
+    }
+
+    // remove assistantId because the update mutation fails otherwise
+    delete payload.assistantID;
+
+    // If the assistantId is set then we do an update
+    if (assistantId) {
+      await updateAssistantMutation({
+        variables: {
+          id: assistantId,
+          data: payload,
+        },
+      });
+
+      return;
+    }
+
+    await insertAssistantMutation({
+      variables: {
+        data: {
+          ...values,
+        },
+      },
+    });
+  };
+
+  const handleSubmit = async (
+    values: DeepRequired<AssistantFormValues> & { assistantID: string },
+  ) => {
+    try {
+      await toast.promise(
+        createOrUpdateAutoEmbeddings(values),
+        {
+          loading: 'Configuring the Assistant...',
+          success: `The Assistant has been configured successfully.`,
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
+
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while configuring the Assistant. Please try again.'
+            );
+          },
+        },
+        getToastStyleProps(),
+      );
+
+      onSubmit?.();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden border-t"
+      >
+        <div className="flex flex-1 flex-col space-y-4 overflow-auto p-4">
+          <Input
+            {...register('name')}
+            id="name"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Name</Text>
+                <Tooltip title="Name of the assistant">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.name}
+            helperText={errors?.name?.message}
+            fullWidth
+            autoComplete="off"
+            autoFocus
+          />
+
+          <Input
+            {...register('description')}
+            id="description"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Description</Text>
+                <Tooltip title={<span>Description of the assistant</span>}>
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.description}
+            helperText={errors?.description?.message}
+            fullWidth
+            autoComplete="off"
+            multiline
+            inputProps={{
+              className: 'resize-y min-h-[22px]',
+            }}
+          />
+
+          <Input
+            {...register('instructions')}
+            id="instructions"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Instructions</Text>
+                <Tooltip title="Instructions for the assistant. This is used to instruct the AI assistant on how to behave and respond to the user">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.instructions}
+            helperText={errors?.instructions?.message}
+            fullWidth
+            autoComplete="off"
+            multiline
+            inputProps={{
+              className: 'resize-y min-h-[22px]',
+            }}
+          />
+
+          <Input
+            {...register('model')}
+            id="model"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Model</Text>
+                <Tooltip title="Model to use for the assistant.">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.model}
+            helperText={errors?.model?.message}
+            fullWidth
+            autoComplete="off"
+            autoFocus
+          />
+          <GraphqlDataSourcesFormSection />
+          <WebhooksDataSourcesFormSection />
+        </div>
+
+        <Box className="flex w-full flex-row justify-between rounded border-t p-4">
+          <Button variant="outlined" color="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            startIcon={assistantId ? <ArrowsClockwise /> : <PlusIcon />}
+          >
+            {assistantId ? 'Update' : 'Create'}
+          </Button>
+        </Box>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/ai/AssistantForm/components/ArgumentsFormSection/ArgumentsFormSection.tsx

@@ -0,0 +1,165 @@
+import { ControlledSelect } from '@/components/form/ControlledSelect';
+import { ControlledSwitch } from '@/components/form/ControlledSwitch';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Option } from '@/components/ui/v2/Option';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { type AssistantFormValues } from '@/features/ai/AssistantForm/AssistantForm';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+interface ArgumentsFormSectionProps {
+  nestedField: string;
+  nestIndex: number;
+}
+
+export default function ArgumentsFormSection({
+  nestedField,
+  nestIndex,
+}: ArgumentsFormSectionProps) {
+  const form = useFormContext<AssistantFormValues>();
+
+  const {
+    register,
+    formState: { errors },
+  } = form;
+
+  const { fields, append, remove } = useFieldArray({
+    name: `${nestedField}.${nestIndex}.arguments`,
+  });
+
+  return (
+    <Box className="space-y-4">
+      <div className="flex flex-row items-center justify-between ">
+        <div className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            Arguments
+          </Text>
+          <Tooltip title={<span>Arguments</span>}>
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </div>
+        <Button variant="borderless" onClick={() => append({})}>
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box
+            key={field.id}
+            className="flex flex-col space-y-20 rounded border-1 p-4"
+            sx={{ backgroundColor: 'grey.200' }}
+          >
+            <div className="flex w-full flex-col space-y-4">
+              <Input
+                // We're putting ts-ignore here so we could use the same components for both graphql and webhooks
+                // by passing the nestedField = 'graphql' or nestedField = 'webhooks'
+                {...register(
+                  // @ts-ignore
+                  `${nestedField}.${nestIndex}.arguments.${index}.name`,
+                )}
+                id={`${field.id}-name`}
+                placeholder="Name"
+                className="w-full"
+                hideEmptyHelperText
+                error={
+                  !!errors?.[nestedField]?.[nestIndex]?.arguments[index].name
+                }
+                helperText={
+                  errors?.[nestedField]?.[nestIndex]?.arguments[index]?.name
+                    ?.message
+                }
+                fullWidth
+                autoComplete="off"
+              />
+
+              <Input
+                {...register(
+                  // @ts-ignore
+                  `${nestedField}.${nestIndex}.arguments.${index}.description`,
+                )}
+                id={`${field.id}-description`}
+                placeholder="Description"
+                className="w-full"
+                hideEmptyHelperText
+                error={
+                  !!errors?.[nestedField]?.[nestIndex]?.arguments[index]
+                    .description
+                }
+                helperText={
+                  errors?.[nestedField]?.[nestIndex]?.arguments[index]
+                    ?.description?.message
+                }
+                fullWidth
+                autoComplete="off"
+                multiline
+                inputProps={{
+                  className: 'resize-y min-h-[22px]',
+                }}
+              />
+
+              <div className="flex flex-row space-x-2">
+                <Box className="w-full">
+                  <ControlledSelect
+                    fullWidth
+                    {...register(
+                      // @ts-ignore
+                      `${nestedField}.${nestIndex}.arguments.${index}.type`,
+                    )}
+                    id={`${field.id}-type`}
+                    placeholder="Select argument type"
+                    slotProps={{
+                      listbox: { className: 'min-w-0 w-full' },
+                      popper: {
+                        disablePortal: false,
+                        className: 'z-[10000] w-[270px] w-full',
+                      },
+                    }}
+                  >
+                    {[
+                      'string',
+                      'number',
+                      'integer',
+                      'object',
+                      'array',
+                      'boolean',
+                    ]?.map((argumentType) => (
+                      <Option key={argumentType} value={argumentType}>
+                        {argumentType}
+                      </Option>
+                    ))}
+                  </ControlledSelect>
+                </Box>
+                <ControlledSwitch
+                  {...register(
+                    // @ts-ignore
+                    `${nestedField}.${nestIndex}.arguments.${index}.required`,
+                  )}
+                  disabled={false}
+                  label={
+                    <Text variant="subtitle1" component="span">
+                      Required
+                    </Text>
+                  }
+                />
+              </div>
+              <Button
+                variant="borderless"
+                className="h-10 self-end"
+                color="error"
+                onClick={() => remove(index)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </div>
+          </Box>
+        ))}
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/ai/AssistantForm/components/ArgumentsFormSection/index.ts

@@ -0,0 +1 @@
+export { default as ArgumentsFormSection } from './ArgumentsFormSection';

dashboard/src/features/ai/AssistantForm/components/GraphqlDataSourcesFormSection/GraphqlDataSourcesFormSection.tsx

@@ -0,0 +1,123 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { type AssistantFormValues } from '@/features/ai/AssistantForm/AssistantForm';
+import { ArgumentsFormSection } from '@/features/ai/AssistantForm/components/ArgumentsFormSection';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function GraphqlDataSourcesFormSection() {
+  const form = useFormContext<AssistantFormValues>();
+
+  const {
+    register,
+    formState: { errors },
+  } = form;
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'graphql',
+  });
+
+  return (
+    <Box className="space-y-4 rounded border-1">
+      <Box className="flex flex-row items-center justify-between p-4 pb-0">
+        <Box className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            GraphQL
+          </Text>
+          <Tooltip title="GraphQL data sources and tools. Run against the project's GraphQL API">
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </Box>
+        <Button
+          variant="borderless"
+          onClick={() =>
+            append({
+              name: '',
+              description: '',
+              query: '',
+              arguments: [],
+            })
+          }
+        >
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </Box>
+
+      <Box className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box key={field.id} className="flex flex-col space-y-4">
+            <Box className="flex w-full flex-col space-y-4 p-4 pt-0">
+              <Input
+                {...register(`graphql.${index}.name`)}
+                id={`${field.id}-name`}
+                label="Name"
+                placeholder="Name"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.graphql?.at(index)?.name}
+                helperText={errors?.graphql?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+              />
+
+              <Input
+                {...register(`graphql.${index}.description`)}
+                id={`${field.id}-description`}
+                label="Description"
+                placeholder="Description"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.graphql?.at(index)?.description}
+                helperText={errors?.graphql?.at(index)?.description?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                inputProps={{
+                  className: 'resize-y min-h-[22px]',
+                }}
+              />
+
+              <Input
+                {...register(`graphql.${index}.query`)}
+                id={`${field.id}-query`}
+                label="Query"
+                placeholder="Query"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.graphql?.at(index)?.query}
+                helperText={errors?.graphql?.at(index)?.query?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                inputProps={{
+                  className: 'resize-y min-h-[22px]',
+                }}
+              />
+
+              <ArgumentsFormSection nestedField="graphql" nestIndex={index} />
+
+              <Button
+                variant="borderless"
+                className="h-10 self-end"
+                color="error"
+                onClick={() => remove(index)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </Box>
+
+            {index < fields.length - 1 && (
+              <Divider className="h-px" sx={{ background: 'grey.200' }} />
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/ai/AssistantForm/components/GraphqlDataSourcesFormSection/index.ts

@@ -0,0 +1 @@
+export { default as GraphqlDataSourcesFormSection } from './GraphqlDataSourcesFormSection';

dashboard/src/features/ai/AssistantForm/components/WebhooksDataSourcesFormSection/WebhooksDataSourcesFormSection.tsx

@@ -0,0 +1,123 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { type AssistantFormValues } from '@/features/ai/AssistantForm/AssistantForm';
+import { ArgumentsFormSection } from '@/features/ai/AssistantForm/components/ArgumentsFormSection';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function WebhooksDataSourcesFormSection() {
+  const form = useFormContext<AssistantFormValues>();
+
+  const {
+    register,
+    formState: { errors },
+  } = form;
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'webhooks',
+  });
+
+  return (
+    <Box className="space-y-4 rounded border-1">
+      <Box className="flex flex-row items-center justify-between p-4">
+        <Box className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            Webhooks
+          </Text>
+          <Tooltip title="Webhook data sources and tools">
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </Box>
+        <Button
+          variant="borderless"
+          onClick={() =>
+            append({
+              name: '',
+              description: '',
+              URL: '',
+              arguments: [],
+            })
+          }
+        >
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </Box>
+
+      <Box className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box key={field.id} className="flex flex-col space-y-4">
+            <Box className="flex w-full flex-col space-y-4 p-4 pt-0">
+              <Input
+                {...register(`webhooks.${index}.name`)}
+                id={`${field.id}-name`}
+                label="Name"
+                placeholder="Name"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.webhooks?.at(index)?.name}
+                helperText={errors?.webhooks?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+              />
+
+              <Input
+                {...register(`webhooks.${index}.description`)}
+                id={`${field.id}-description`}
+                label="Description"
+                placeholder="Description"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.webhooks?.at(index)?.description}
+                helperText={errors?.webhooks?.at(index)?.description?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                inputProps={{
+                  className: 'resize-y min-h-[22px]',
+                }}
+              />
+
+              <Input
+                {...register(`webhooks.${index}.URL`)}
+                id={`${field.id}-URL`}
+                label="URL"
+                placeholder="URL"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.webhooks?.at(index)?.URL}
+                helperText={errors?.webhooks?.at(index)?.URL?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                inputProps={{
+                  className: 'resize-y min-h-[22px]',
+                }}
+              />
+
+              <ArgumentsFormSection nestedField="webhooks" nestIndex={index} />
+
+              <Button
+                variant="borderless"
+                className="h-10 self-end"
+                color="error"
+                onClick={() => remove(index)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </Box>
+
+            {index < fields.length - 1 && (
+              <Divider className="h-px" sx={{ background: 'grey.200' }} />
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/ai/AssistantForm/components/WebhooksDataSourcesFormSection/index.ts

@@ -0,0 +1 @@
+export { default as WebhooksDataSourcesFormSection } from './WebhooksDataSourcesFormSection';

dashboard/src/features/ai/AssistantForm/index.ts

@@ -0,0 +1 @@
+export { default as AssistantForm } from './AssistantForm';

dashboard/src/features/ai/AssistantsList/AssistantsList.tsx

@@ -0,0 +1,158 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { AssistantForm } from '@/features/ai/AssistantForm';
+import { DeleteAssistantModal } from '@/features/ai/DeleteAssistantModal';
+import { copy } from '@/utils/copy';
+import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
+
+interface AssistantsListProps {
+  /**
+   * The run services fetched from entering the users page.
+   */
+  assistants: Assistant[];
+
+  /**
+   * Function to be called after a submitting the form for either creating or updating a service.
+   *
+   * @example onDelete={() => refetch()}
+   */
+  onCreateOrUpdate?: () => Promise<any>;
+
+  /**
+   * Function to be called after a successful delete action.
+   *
+   */
+  onDelete?: () => Promise<any>;
+}
+
+export default function AssistantsList({
+  assistants,
+  onCreateOrUpdate,
+  onDelete,
+}: AssistantsListProps) {
+  const { openDrawer, openDialog, closeDialog } = useDialog();
+
+  const viewAssistant = async (assistant: Assistant) => {
+    openDrawer({
+      title: `Edit ${assistant?.name ?? 'unset'}`,
+      component: (
+        <AssistantForm
+          assistantId={assistant.assistantID}
+          initialData={{
+            ...assistant,
+          }}
+          onSubmit={() => onCreateOrUpdate()}
+        />
+      ),
+    });
+  };
+
+  const deleteAssistant = async (assistant: Assistant) => {
+    openDialog({
+      component: (
+        <DeleteAssistantModal
+          assistant={assistant}
+          close={closeDialog}
+          onDelete={onDelete}
+        />
+      ),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col">
+      {assistants.map((assistant) => (
+        <Box
+          key={assistant.assistantID}
+          className="flex h-[64px] w-full cursor-pointer items-center justify-between space-x-4 border-b-1 px-4 py-2 transition-colors"
+          sx={{
+            [`&:hover`]: {
+              backgroundColor: 'action.hover',
+            },
+          }}
+        >
+          <Box
+            onClick={() => viewAssistant(assistant)}
+            className="flex w-full flex-row justify-between"
+            sx={{ backgroundColor: 'transparent' }}
+          >
+            <div className="flex flex-1 flex-row items-center space-x-4">
+              <span className="text-3xl">🤖</span>
+              <div className="flex flex-col">
+                <Text variant="h4" className="font-semibold">
+                  {assistant?.name ?? 'unset'}
+                </Text>
+                <div className="hidden flex-row items-center space-x-2 md:flex">
+                  <Text variant="subtitle1" className="font-mono text-xs">
+                    {assistant.assistantID}
+                  </Text>
+                  <IconButton
+                    variant="borderless"
+                    color="secondary"
+                    onClick={(event) => {
+                      copy(assistant.assistantID, 'Assistant Id');
+                      event.stopPropagation();
+                    }}
+                    aria-label="Service Id"
+                  >
+                    <CopyIcon className="h-4 w-4" />
+                  </IconButton>
+                </div>
+              </div>
+            </div>
+          </Box>
+
+          <Dropdown.Root>
+            <Dropdown.Trigger
+              asChild
+              hideChevron
+              onClick={(event) => event.stopPropagation()}
+            >
+              <IconButton
+                variant="borderless"
+                color="secondary"
+                aria-label="More options"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <DotsHorizontalIcon />
+              </IconButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content
+              menu
+              PaperProps={{ className: 'w-auto' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <Dropdown.Item
+                onClick={() => viewAssistant(assistant)}
+                className="z-50 grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+              >
+                <UserIcon className="h-4 w-4" />
+                <Text className="font-medium">View {assistant?.name}</Text>
+              </Dropdown.Item>
+              <Divider component="li" />
+              <Dropdown.Item
+                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                sx={{ color: 'error.main' }}
+                onClick={() => deleteAssistant(assistant)}
+              >
+                <TrashIcon className="h-4 w-4" />
+                <Text className="font-medium" color="error">
+                  Delete {assistant?.name}
+                </Text>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      ))}
+    </Box>
+  );
+}

dashboard/src/features/ai/AssistantsList/index.ts

@@ -0,0 +1 @@
+export { default as AssistantsList } from './AssistantsList';

dashboard/src/features/ai/AutoEmbeddingsForm/AutoEmbeddingsForm.tsx

@@ -0,0 +1,330 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Form } from '@/components/form/Form';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowsClockwise } from '@/components/ui/v2/icons/ArrowsClockwise';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import type { DialogFormProps } from '@/types/common';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getHasuraAdminSecret } from '@/utils/env';
+import {
+  useInsertGraphiteAutoEmbeddingsConfigurationMutation,
+  useUpdateGraphiteAutoEmbeddingsConfigurationMutation,
+} from '@/utils/__generated__/graphite.graphql';
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  type ApolloError,
+} from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  name: Yup.string().required('The name is required.'),
+  schemaName: Yup.string().required('The schema is required'),
+  tableName: Yup.string().required('The table is required'),
+  columnName: Yup.string().required('The column is required'),
+  query: Yup.string(),
+  mutation: Yup.string(),
+});
+
+export type AutoEmbeddingsFormValues = Yup.InferType<typeof validationSchema>;
+
+export interface AutoEmbeddingsFormProps extends DialogFormProps {
+  /**
+   * To use in conjunction with initialData to allow for updating the autoEmbeddingsConfiguration
+   */
+  autoEmbeddingsId?: string;
+
+  /**
+   * if there is initialData then it's an update operation
+   */
+  initialData?: AutoEmbeddingsFormValues;
+
+  /**
+   * Function to be called when the operation is cancelled.
+   */
+  onCancel?: VoidFunction;
+  /**
+   * Function to be called when the submit is successful.
+   */
+  onSubmit?: VoidFunction | ((args?: any) => Promise<any>);
+}
+
+export default function AutoEmbeddingsForm({
+  autoEmbeddingsId,
+  initialData,
+  onSubmit,
+  onCancel,
+  location,
+}: AutoEmbeddingsFormProps) {
+  const { onDirtyStateChange } = useDialog();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const serviceUrl = generateAppServiceUrl(
+    currentProject?.subdomain,
+    currentProject?.region,
+    'graphql',
+  );
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: serviceUrl,
+      headers: {
+        'x-hasura-admin-secret':
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? getHasuraAdminSecret()
+            : currentProject?.config?.hasura.adminSecret,
+      },
+    }),
+  });
+
+  const [insertGraphiteAutoEmbeddingsConfiguration] =
+    useInsertGraphiteAutoEmbeddingsConfigurationMutation({
+      client,
+    });
+
+  const [updateGraphiteAutoEmbeddingsConfiguration] =
+    useUpdateGraphiteAutoEmbeddingsConfigurationMutation({ client });
+
+  const form = useForm<AutoEmbeddingsFormValues>({
+    defaultValues: initialData,
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  const {
+    register,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = form;
+
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
+  const createOrUpdateAutoEmbeddings = async (
+    values: AutoEmbeddingsFormValues,
+  ) => {
+    // If the autoEmbeddingsId is set then we do an update
+    if (autoEmbeddingsId) {
+      await updateGraphiteAutoEmbeddingsConfiguration({
+        variables: {
+          id: autoEmbeddingsId,
+          ...values,
+        },
+      });
+
+      return;
+    }
+
+    await insertGraphiteAutoEmbeddingsConfiguration({
+      variables: values,
+    });
+  };
+
+  const handleSubmit = async (values: AutoEmbeddingsFormValues) => {
+    try {
+      await toast.promise(
+        createOrUpdateAutoEmbeddings(values),
+        {
+          loading: 'Configuring the Auto-Embeddings...',
+          success: `The Auto-Embeddings has been configured successfully.`,
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
+
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while configuring the Auto-Embeddings. Please try again.'
+            );
+          },
+        },
+        getToastStyleProps(),
+      );
+
+      onSubmit?.();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col gap-4 overflow-hidden"
+      >
+        <div className="flex flex-1 flex-col space-y-6 overflow-auto px-6">
+          <Input
+            {...register('name')}
+            id="name"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Name</Text>
+                <Tooltip title="Name of the Auto-Embeddings">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.name}
+            helperText={errors?.name?.message}
+            fullWidth
+            autoComplete="off"
+            autoFocus
+          />
+          <Input
+            {...register('schemaName')}
+            id="schemaName"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Schema</Text>
+                <Tooltip title={<span>Schema where the table belongs to</span>}>
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.schemaName}
+            helperText={errors?.schemaName?.message}
+            fullWidth
+            autoComplete="off"
+          />
+          <Input
+            {...register('tableName')}
+            id="tableName"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Table</Text>
+                <Tooltip title="Table Name">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.tableName}
+            helperText={errors?.tableName?.message}
+            fullWidth
+            autoComplete="off"
+          />
+          <Input
+            {...register('columnName')}
+            id="columnName"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Column</Text>
+                <Tooltip title="Column name">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.columnName}
+            helperText={errors?.columnName?.message}
+            fullWidth
+            autoComplete="off"
+          />
+          <Input
+            {...register('query')}
+            id="query"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Query</Text>
+                <Tooltip title="Query">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.query}
+            helperText={errors?.query?.message}
+            fullWidth
+            autoComplete="off"
+            multiline
+            rows={6}
+          />
+          <Input
+            {...register('mutation')}
+            id="mutation"
+            label={
+              <Box className="flex flex-row items-center space-x-2">
+                <Text>Mutation</Text>
+                <Tooltip title="Mutation">
+                  <InfoIcon
+                    aria-label="Info"
+                    className="h-4 w-4"
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+            }
+            placeholder=""
+            hideEmptyHelperText
+            error={!!errors.mutation}
+            helperText={errors?.mutation?.message}
+            fullWidth
+            autoComplete="off"
+            multiline
+            rows={6}
+          />
+        </div>
+
+        <Box className="flex w-full flex-row justify-between rounded border-t px-6 py-4">
+          <Button variant="outlined" color="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            startIcon={autoEmbeddingsId ? <ArrowsClockwise /> : <PlusIcon />}
+          >
+            {autoEmbeddingsId ? 'Update' : 'Create'}
+          </Button>
+        </Box>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/ai/AutoEmbeddingsForm/index.ts

@@ -0,0 +1 @@
+export { default as AutoEmbeddingsForm } from './AutoEmbeddingsForm';

dashboard/src/features/ai/AutoEmbeddingsList/AutoEmbeddingsList.tsx

@@ -0,0 +1,172 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CubeIcon } from '@/components/ui/v2/icons/CubeIcon';
+import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon';
+import { EmbeddingsIcon } from '@/components/ui/v2/icons/EmbeddingsIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { AutoEmbeddingsForm } from '@/features/ai/AutoEmbeddingsForm';
+import { DeleteAutoEmbeddingsModal } from '@/features/ai/DeleteAutoEmbeddingsModal';
+import { formatDistanceToNow } from 'date-fns';
+import type { AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
+
+interface AutoEmbeddingsConfigurationsListProps {
+  /**
+   * The run services fetched from entering the users page.
+   */
+  autoEmbeddingsConfigurations: AutoEmbeddingsConfiguration[];
+
+  /**
+   * Function to be called after a submitting the form for either creating or updating a service.
+   *
+   * @example onDelete={() => refetch()}
+   */
+  onCreateOrUpdate?: () => Promise<any>;
+
+  /**
+   * Function to be called after a successful delete action.
+   *
+   */
+  onDelete?: () => Promise<any>;
+}
+
+export default function AutoEmbeddingsList({
+  autoEmbeddingsConfigurations,
+  onCreateOrUpdate,
+  onDelete,
+}: AutoEmbeddingsConfigurationsListProps) {
+  const { openDrawer, openDialog, closeDialog } = useDialog();
+
+  const viewAutoEmbeddingsConfiguration = async (
+    autoEmbeddingsConfiguration: AutoEmbeddingsConfiguration,
+  ) => {
+    openDrawer({
+      title: (
+        <Box className="flex flex-row items-center space-x-2">
+          <CubeIcon className="h-5 w-5" />
+          <Text>Edit {autoEmbeddingsConfiguration?.name ?? 'unset'}</Text>
+        </Box>
+      ),
+      component: (
+        <AutoEmbeddingsForm
+          autoEmbeddingsId={autoEmbeddingsConfiguration.id}
+          initialData={{
+            ...autoEmbeddingsConfiguration,
+          }}
+          onSubmit={() => onCreateOrUpdate()}
+        />
+      ),
+    });
+  };
+
+  const deleteAutoEmbeddingsConfiguration = async (
+    autoEmbeddingsConfiguration: AutoEmbeddingsConfiguration,
+  ) => {
+    openDialog({
+      component: (
+        <DeleteAutoEmbeddingsModal
+          autoEmbeddingsConfiguration={autoEmbeddingsConfiguration}
+          close={closeDialog}
+          onDelete={onDelete}
+        />
+      ),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col">
+      {autoEmbeddingsConfigurations.map((autoEmbeddingsConfiguration) => (
+        <Box
+          key={autoEmbeddingsConfiguration.id}
+          className="flex h-[64px] w-full cursor-pointer items-center justify-between space-x-4 border-b-1 px-4 py-2 transition-colors"
+          sx={{
+            [`&:hover`]: {
+              backgroundColor: 'action.hover',
+            },
+          }}
+        >
+          <Box
+            onClick={() =>
+              viewAutoEmbeddingsConfiguration(autoEmbeddingsConfiguration)
+            }
+            className="flex w-full flex-row justify-between"
+            sx={{
+              backgroundColor: 'transparent',
+            }}
+          >
+            <div className="flex flex-1 flex-row items-center space-x-4">
+              <EmbeddingsIcon className="h-5 w-5" />
+              <div className="flex flex-col">
+                <Text variant="h4" className="font-semibold">
+                  {autoEmbeddingsConfiguration?.name ?? 'unset'}
+                </Text>
+                <Tooltip title={autoEmbeddingsConfiguration.updatedAt}>
+                  <span className="hidden cursor-pointer text-sm text-slate-500 xs+:flex">
+                    Updated{' '}
+                    {formatDistanceToNow(
+                      new Date(autoEmbeddingsConfiguration.updatedAt),
+                    )}{' '}
+                    ago
+                  </span>
+                </Tooltip>
+              </div>
+            </div>
+          </Box>
+
+          <Dropdown.Root>
+            <Dropdown.Trigger
+              asChild
+              hideChevron
+              onClick={(event) => event.stopPropagation()}
+            >
+              <IconButton
+                variant="borderless"
+                color="secondary"
+                aria-label="More options"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <DotsHorizontalIcon />
+              </IconButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content
+              menu
+              PaperProps={{ className: 'w-auto' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <Dropdown.Item
+                onClick={() =>
+                  viewAutoEmbeddingsConfiguration(autoEmbeddingsConfiguration)
+                }
+                className="z-50 grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+              >
+                <UserIcon className="h-4 w-4" />
+                <Text className="font-medium">
+                  View {autoEmbeddingsConfiguration?.name}
+                </Text>
+              </Dropdown.Item>
+              <Divider component="li" />
+              <Dropdown.Item
+                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                sx={{ color: 'error.main' }}
+                onClick={() =>
+                  deleteAutoEmbeddingsConfiguration(autoEmbeddingsConfiguration)
+                }
+              >
+                <TrashIcon className="h-4 w-4" />
+                <Text className="font-medium" color="error">
+                  Delete {autoEmbeddingsConfiguration?.name}
+                </Text>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      ))}
+    </Box>
+  );
+}

dashboard/src/features/ai/AutoEmbeddingsList/index.ts

@@ -0,0 +1 @@
+export { default as AutoEmbeddingsList } from './AutoEmbeddingsList';

dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx

@@ -0,0 +1,143 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  type ApolloError,
+} from '@apollo/client';
+import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export interface DeleteAssistantModalProps {
+  assistant: Assistant;
+  onDelete?: () => Promise<any>;
+  close: () => void;
+}
+
+export default function DeleteAssistantModal({
+  assistant,
+  onDelete,
+  close,
+}: DeleteAssistantModalProps) {
+  const [remove, setRemove] = useState(false);
+  const [loadingRemove, setLoadingRemove] = useState(false);
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const serviceUrl = generateAppServiceUrl(
+    currentProject?.subdomain,
+    currentProject?.region,
+    'graphql',
+  );
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: serviceUrl,
+      headers: {
+        'x-hasura-admin-secret':
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? getHasuraAdminSecret()
+            : currentProject?.config?.hasura.adminSecret,
+      },
+    }),
+  });
+
+  const [deleteAssistantMutation] = useDeleteAssistantMutation({
+    client,
+  });
+
+  const deleteAssistant = async () => {
+    await deleteAssistantMutation({
+      variables: {
+        id: assistant.assistantID,
+      },
+    });
+    await onDelete?.();
+    close();
+  };
+
+  async function handleClick() {
+    setLoadingRemove(true);
+
+    await toast.promise(
+      deleteAssistant(),
+      {
+        loading: 'Deleting the assistant...',
+        success: `The Assistant has been deleted successfully.`,
+        error: (arg: ApolloError) => {
+          // we need to get the internal error message from the GraphQL error
+          const { internal } = arg.graphQLErrors[0]?.extensions || {};
+          const { message } = (internal as Record<string, any>)?.error || {};
+
+          // we use the default Apollo error message if we can't find the
+          // internal error message
+          return (
+            message ||
+            arg.message ||
+            'An error occurred while deleting the Assistant. Please try again.'
+          );
+        },
+      },
+      getToastStyleProps(),
+    );
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 text-left')}>
+      <div className="grid grid-flow-row gap-1">
+        <Text variant="h3" component="h2">
+          Delete Assistant {assistant?.name}
+        </Text>
+
+        <Text variant="subtitle2">
+          Are you sure you want to delete this Assistant?
+        </Text>
+
+        <Text
+          variant="subtitle2"
+          className="font-bold"
+          sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+        >
+          This cannot be undone.
+        </Text>
+
+        <Box className="my-4">
+          <Checkbox
+            id="accept-1"
+            label={`I'm sure I want to delete ${assistant?.name}`}
+            className="py-2"
+            checked={remove}
+            onChange={(_event, checked) => setRemove(checked)}
+            aria-label="Confirm Delete Assistant"
+          />
+        </Box>
+
+        <div className="grid grid-flow-row gap-2">
+          <Button
+            color="error"
+            onClick={handleClick}
+            disabled={!remove}
+            loading={loadingRemove}
+          >
+            Delete Assistant
+          </Button>
+
+          <Button variant="outlined" color="secondary" onClick={close}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/ai/DeleteAssistantModal/index.ts

@@ -0,0 +1 @@
+export { default as DeleteAssistantModal } from './DeleteAssistantModal';

dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx

@@ -0,0 +1,145 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  type ApolloError,
+} from '@apollo/client';
+import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export interface DeleteAutoEmbeddingsModalProps {
+  autoEmbeddingsConfiguration: AutoEmbeddingsConfiguration;
+  onDelete?: () => Promise<any>;
+  close: () => void;
+}
+
+export default function DeleteAutoEmbeddingsModal({
+  autoEmbeddingsConfiguration,
+  onDelete,
+  close,
+}: DeleteAutoEmbeddingsModalProps) {
+  const [remove, setRemove] = useState(false);
+  const [loadingRemove, setLoadingRemove] = useState(false);
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const serviceUrl = generateAppServiceUrl(
+    currentProject?.subdomain,
+    currentProject?.region,
+    'graphql',
+  );
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: serviceUrl,
+      headers: {
+        'x-hasura-admin-secret':
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? getHasuraAdminSecret()
+            : currentProject?.config?.hasura.adminSecret,
+      },
+    }),
+  });
+
+  const [deleteAutoEmbeddingsConfiguration] =
+    useDeleteGraphiteAutoEmbeddingsConfigurationMutation({
+      client,
+    });
+
+  const deleteAutoEmbeddingsConfig = async () => {
+    await deleteAutoEmbeddingsConfiguration({
+      variables: {
+        id: autoEmbeddingsConfiguration.id,
+      },
+    });
+    await onDelete?.();
+    close();
+  };
+
+  async function handleClick() {
+    setLoadingRemove(true);
+
+    await toast.promise(
+      deleteAutoEmbeddingsConfig(),
+      {
+        loading: 'Deleting Auto-Embeddings Configuration...',
+        success: `The Auto-Embeddings Configuration has been deleted successfully.`,
+        error: (arg: ApolloError) => {
+          // we need to get the internal error message from the GraphQL error
+          const { internal } = arg.graphQLErrors[0]?.extensions || {};
+          const { message } = (internal as Record<string, any>)?.error || {};
+
+          // we use the default Apollo error message if we can't find the
+          // internal error message
+          return (
+            message ||
+            arg.message ||
+            'An error occurred while deleting the Auto-Embeddings Configuration. Please try again.'
+          );
+        },
+      },
+      getToastStyleProps(),
+    );
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 text-left')}>
+      <div className="grid grid-flow-row gap-1">
+        <Text variant="h3" component="h2">
+          Delete Auto-Embeddings Configuration{' '}
+          {autoEmbeddingsConfiguration?.name}
+        </Text>
+
+        <Text variant="subtitle2">
+          Are you sure you want to delete this Auto-Embeddings Configuration?
+        </Text>
+
+        <Text
+          variant="subtitle2"
+          className="font-bold"
+          sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+        >
+          This cannot be undone.
+        </Text>
+
+        <Box className="my-4">
+          <Checkbox
+            id="accept-1"
+            label={`I'm sure I want to delete ${autoEmbeddingsConfiguration?.name}`}
+            className="py-2"
+            checked={remove}
+            onChange={(_event, checked) => setRemove(checked)}
+            aria-label="Confirm Delete Auto-Embeddings Configuration"
+          />
+        </Box>
+
+        <div className="grid grid-flow-row gap-2">
+          <Button
+            color="error"
+            onClick={handleClick}
+            disabled={!remove}
+            loading={loadingRemove}
+          >
+            Delete Auto-Embeddings Configuration
+          </Button>
+
+          <Button variant="outlined" color="secondary" onClick={close}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/ai/DeleteAutoEmbeddingsModal/index.ts

@@ -0,0 +1 @@
+export { default as DeleteAutoEmbeddingsModal } from './DeleteAutoEmbeddingsModal';

dashboard/src/features/ai/DevAssistant/DevAssistant.tsx

@@ -0,0 +1,229 @@
+import { UpgradeToProBanner } from '@/components/common/UpgradeToProBanner';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { ArrowUpIcon } from '@/components/ui/v2/icons/ArrowUpIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { MessagesList } from '@/features/ai/DevAssistant/components/MessagesList';
+import {
+  messagesState,
+  projectMessagesState,
+  sessionIDState,
+} from '@/features/ai/DevAssistant/state';
+import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsGraphiteEnabled } from '@/features/projects/common/hooks/useIsGraphiteEnabled';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import {
+  useSendDevMessageMutation,
+  useStartDevSessionMutation,
+  type SendDevMessageMutation,
+} from '@/utils/__generated__/graphite.graphql';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+
+const MAX_THREAD_LENGTH = 50;
+
+export type Message = Omit<
+  SendDevMessageMutation['graphite']['sendDevMessage']['messages'][0],
+  '__typename'
+>;
+
+export default function DevAssistant() {
+  const isPlatform = useIsPlatform();
+  const { currentProject, currentWorkspace } = useCurrentWorkspaceAndProject();
+
+  const [loading, setLoading] = useState(false);
+  const [userInput, setUserInput] = useState('');
+  const setMessages = useSetRecoilState(messagesState);
+  const messages = useRecoilValue(projectMessagesState(currentProject.id));
+  const [storedSessionID, setStoredSessionID] = useRecoilState(sessionIDState);
+
+  const { adminClient } = useAdminApolloClient();
+  const [startDevSession] = useStartDevSessionMutation({ client: adminClient });
+  const [sendDevMessage] = useSendDevMessageMutation({ client: adminClient });
+
+  const { isGraphiteEnabled } = useIsGraphiteEnabled();
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    try {
+      setLoading(true);
+      setUserInput('');
+
+      let sessionID = storedSessionID;
+      const lastMessage = messages.slice(1).pop(); // The first message is a welcome message, so we exclude it
+
+      let hasBeenAnHourSinceLastMessage = false;
+      if (lastMessage) {
+        hasBeenAnHourSinceLastMessage =
+          new Date().getTime() - new Date(lastMessage.createdAt).getTime() >
+          60 * 60 * 1000;
+      }
+
+      const $messages = [
+        ...messages,
+        {
+          id: String(new Date().getTime()),
+          message: userInput,
+          createdAt: null,
+          role: 'user',
+          projectId: currentProject.id,
+        },
+      ];
+
+      setMessages($messages);
+
+      if (!sessionID || hasBeenAnHourSinceLastMessage) {
+        const sessionRes = await startDevSession({ client: adminClient });
+        sessionID = sessionRes?.data?.graphite?.startDevSession?.sessionID;
+        setStoredSessionID(sessionID);
+      }
+
+      if (!sessionID) {
+        throw new Error('Failed to start a new session');
+      }
+
+      const {
+        data: {
+          graphite: { sendDevMessage: { messages: newMessages } = {} } = {},
+        } = {},
+      } = await sendDevMessage({
+        variables: {
+          message: userInput,
+          sessionId: sessionID || '',
+          prevMessageID: !hasBeenAnHourSinceLastMessage
+            ? lastMessage?.id || ''
+            : '',
+        },
+      });
+
+      let thread = [
+        // remove the temp messages of the user input while we wait for the dev assistant to respond
+        ...$messages.filter((item) => item.createdAt),
+        ...newMessages
+
+          // remove empty messages
+          .filter((item) => item.message)
+
+          // add the currentProject.id to the new messages
+          .map((item) => ({ ...item, projectId: currentProject.id })),
+      ];
+
+      if (thread.length > MAX_THREAD_LENGTH) {
+        thread = thread.slice(thread.length - MAX_THREAD_LENGTH); // keep the thread at a max length of MAX_THREAD_LENGTH
+      }
+
+      setMessages(thread);
+    } catch (error) {
+      toast.error(
+        'Failed to send the message to graphite. Please try again later.',
+        {
+          style: getToastStyleProps().style,
+          ...getToastStyleProps().error,
+        },
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      const form = event.currentTarget.closest('form');
+      if (form) {
+        form.dispatchEvent(
+          new Event('submit', { bubbles: true, cancelable: true }),
+        );
+      }
+    }
+  };
+
+  if (isPlatform && currentProject?.plan?.isFree) {
+    return (
+      <Box className="p-4">
+        <UpgradeToProBanner
+          title="Upgrade to Nhost Pro."
+          description={
+            <Text>
+              Graphite is an addon to the Pro plan. To unlock it, please upgrade
+              to Pro first.
+            </Text>
+          }
+        />
+      </Box>
+    );
+  }
+
+  if (
+    (isPlatform &&
+      !currentProject?.plan?.isFree &&
+      !currentProject.config?.ai) ||
+    !isGraphiteEnabled
+  ) {
+    return (
+      <Box className="p-4">
+        <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
+          <Text className="grid grid-flow-row justify-items-start gap-0.5">
+            <Text component="span">
+              To enable graphite, configure the service first in{' '}
+              <Link
+                href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/ai`}
+                target="_blank"
+                rel="noopener noreferrer"
+                underline="hover"
+              >
+                AI Settings
+              </Link>
+              .
+            </Text>
+          </Text>
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-auto">
+      <MessagesList loading={loading} />
+
+      <form onSubmit={handleSubmit}>
+        <Box className="relative flex w-full flex-row justify-between p-2">
+          <Input
+            value={userInput}
+            onChange={(event) => {
+              const { value } = event.target;
+              setUserInput(value);
+            }}
+            onKeyPress={handleKeyPress}
+            placeholder="Ask graphite anything!"
+            className="w-full"
+            required
+            slotProps={{
+              input: { className: 'w-full rounded-none border-none' },
+            }}
+            multiline
+            maxRows={7}
+          />
+
+          <IconButton
+            disabled={!userInput || loading}
+            color="primary"
+            aria-label="Send"
+            type="submit"
+            className="absolute right-2 h-10 w-12 self-end rounded-xl"
+          >
+            {loading ? <ActivityIndicator /> : <ArrowUpIcon />}
+          </IconButton>
+        </Box>
+      </form>
+    </div>
+  );
+}

dashboard/src/features/ai/DevAssistant/components/LoadingAssistantMessage/LoadingAssistantMessage.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@/components/ui/v2/Box';
+import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
+import { Text } from '@/components/ui/v2/Text';
+
+export default function LoadingAssistantMessage() {
+  return (
+    <Box className="flex flex-col space-y-4 border-t p-4">
+      <div className="flex items-center space-x-2">
+        <GraphiteIcon />
+        <Text className="font-bold">Assistant</Text>
+      </div>
+      <div className="flex space-x-1">
+        <Box
+          className="h-1.5 w-1.5 animate-blinking rounded-full"
+          sx={{ backgroundColor: 'grey.600' }}
+        />
+        <Box
+          className="h-1.5 w-1.5 animate-blinking rounded-full animate-delay-150"
+          sx={{ backgroundColor: 'grey.600' }}
+        />
+        <Box
+          className="h-1.5 w-1.5 animate-blinking rounded-full animate-delay-300"
+          sx={{ backgroundColor: 'grey.600' }}
+        />
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/ai/DevAssistant/components/LoadingAssistantMessage/index.ts

@@ -0,0 +1 @@
+export { default as LoadingAssistantMessage } from './LoadingAssistantMessage';

dashboard/src/features/ai/DevAssistant/components/MessageBox/MessageBox.tsx

@@ -0,0 +1,98 @@
+import { Avatar } from '@/components/ui/v2/Avatar';
+import { Box } from '@/components/ui/v2/Box';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { type Message } from '@/features/ai/DevAssistant';
+import { copy } from '@/utils/copy';
+import { useTheme } from '@mui/material';
+import { useUserData } from '@nhost/nextjs';
+import { onlyText } from 'react-children-utilities';
+import Markdown, { type ExtraProps } from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGFM from 'remark-gfm';
+import { twMerge } from 'tailwind-merge';
+
+import { type ClassAttributes, type HTMLAttributes } from 'react';
+
+function PreComponent(
+  props: ClassAttributes<HTMLElement> &
+    HTMLAttributes<HTMLElement> &
+    ExtraProps,
+) {
+  const { children } = props;
+
+  return (
+    <div className="group relative">
+      <pre>{children}</pre>
+      <IconButton
+        sx={{
+          minWidth: 0,
+          padding: 0.5,
+          backgroundColor: 'grey.100',
+        }}
+        color="warning"
+        variant="contained"
+        className="absolute top-2 right-2 hidden group-hover:flex"
+        onClick={(e) => {
+          e.stopPropagation();
+          copy(onlyText(children), 'Snippet');
+        }}
+      >
+        <CopyIcon className="h-5 w-5" />
+      </IconButton>
+    </div>
+  );
+}
+
+export default function MessageBox({ message }: { message: Message }) {
+  const theme = useTheme();
+  const user = useUserData();
+  const isUserMessage = message.role === 'user';
+
+  return (
+    <Box
+      className="flex flex-col space-y-4 border-t p-4 first:border-t-0"
+      sx={{
+        backgroundColor: isUserMessage && 'background.default',
+      }}
+    >
+      <div className="flex items-center space-x-2">
+        {message.role === 'assistant' ? (
+          <>
+            <GraphiteIcon />
+            <Text className="font-bold">Assistant</Text>
+          </>
+        ) : (
+          <>
+            <Avatar
+              className="h-7 w-7 rounded-full"
+              alt={user?.displayName}
+              src={user?.avatarUrl}
+            >
+              {user?.displayName || 'local'}
+            </Avatar>
+            <Text className="font-bold">
+              {user?.displayName || 'local'} (You)
+            </Text>
+          </>
+        )}
+      </div>
+
+      <Markdown
+        className={twMerge(
+          'prose',
+          theme.palette.mode === 'dark' && 'prose-invert',
+        )}
+        rehypePlugins={[rehypeHighlight]}
+        remarkPlugins={[remarkGFM]}
+        components={{
+          pre: PreComponent,
+        }}
+      >
+        {message.message}
+      </Markdown>
+    </Box>
+  );
+}

dashboard/src/features/ai/DevAssistant/components/MessageBox/index.ts

@@ -0,0 +1 @@
+export { default as MessageBox } from './MessageBox';

dashboard/src/features/ai/DevAssistant/components/MessagesList/MessagesList.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@/components/ui/v2/Box';
+import { LoadingAssistantMessage } from '@/features/ai/DevAssistant/components/LoadingAssistantMessage';
+import { MessageBox } from '@/features/ai/DevAssistant/components/MessageBox';
+import { projectMessagesState } from '@/features/ai/DevAssistant/state';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { memo, useEffect, useRef } from 'react';
+import { useRecoilValue } from 'recoil';
+
+interface MessagesListProps {
+  loading: boolean;
+}
+
+function MessagesList({ loading }: MessagesListProps) {
+  const bottomElement = useRef(null);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const messages = useRecoilValue(projectMessagesState(currentProject.id));
+
+  const scrollToBottom = () =>
+    bottomElement?.current?.scrollIntoView({ behavior: 'instant' });
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, loading]);
+
+  return (
+    <Box className="flex grow flex-col overflow-auto border-y">
+      {messages.map((message) => (
+        <MessageBox key={message.id} message={message} />
+      ))}
+      {loading && <LoadingAssistantMessage />}
+      <div ref={bottomElement} />
+    </Box>
+  );
+}
+
+export default memo(MessagesList);

dashboard/src/features/ai/DevAssistant/components/MessagesList/index.ts

@@ -0,0 +1 @@
+export { default as MessagesList } from './MessagesList';

dashboard/src/features/ai/DevAssistant/index.ts

@@ -0,0 +1,2 @@
+export * from './DevAssistant';
+export { default as DevAssistant } from './DevAssistant';

dashboard/src/features/ai/DevAssistant/state/index.ts

@@ -0,0 +1,5 @@
+export * from './messages';
+export { default as messagesState } from './messages';
+// eslint-disable-next-line import/no-cycle
+export { default as projectMessagesState } from './projectMessages';
+export { default as sessionIDState } from './session';

dashboard/src/features/ai/DevAssistant/state/messages.ts

@@ -0,0 +1,23 @@
+import { type Message } from '@/features/ai/DevAssistant';
+import { persistAtom } from '@/utils/recoil';
+import { atom } from 'recoil';
+
+export interface ProjectMessage extends Message {
+  projectId?: string;
+}
+
+const messagesState = atom<ProjectMessage[]>({
+  key: 'messages',
+  default: [
+    {
+      id: '0',
+      message:
+        "Hi, I'm your personal Nhost AI assistant. I'm here to help answer questions, assist with tasks, provide information, or just have a conversation about GraphQL!",
+      role: 'assistant',
+      createdAt: new Date().toISOString(),
+    },
+  ],
+  effects: [persistAtom],
+});
+
+export default messagesState;

dashboard/src/features/ai/DevAssistant/state/projectMessages.ts

@@ -0,0 +1,20 @@
+import messagesState, {
+  type ProjectMessage,
+} from '@/features/ai/DevAssistant/state/messages';
+import { selectorFamily } from 'recoil';
+
+const projectMessagesState = selectorFamily<ProjectMessage[], string>({
+  key: 'projectMessages',
+  get:
+    (projectId) =>
+    ({ get }) => {
+      const messages = get(messagesState);
+
+      return messages.filter(
+        (message) =>
+          message.projectId === projectId || message.projectId === undefined,
+      );
+    },
+});
+
+export default projectMessagesState;

dashboard/src/features/ai/DevAssistant/state/session.ts

@@ -0,0 +1,10 @@
+import { persistAtom } from '@/utils/recoil';
+import { atom } from 'recoil';
+
+const sessionIDState = atom<string>({
+  key: 'sessionID',
+  default: '',
+  effects: [persistAtom],
+});
+
+export default sessionIDState;

dashboard/src/features/ai/settings/components/AISettings.tsx

@@ -0,0 +1,459 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Switch } from '@/components/ui/v2/Switch';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { COST_PER_VCPU } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import { ComputeFormSection } from '@/features/services/components/ServiceForm/components/ComputeFormSection';
+import {
+  Software_Type_Enum,
+  useGetAiSettingsQuery,
+  useGetSoftwareVersionsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import { DisableAIServiceConfirmationDialog } from './DisableAIServiceConfirmationDialog';
+
+const validationSchema = Yup.object({
+  version: Yup.object({
+    label: Yup.string().required(),
+    value: Yup.string().required(),
+  }),
+  webhookSecret: Yup.string(),
+  synchPeriodMinutes: Yup.number(),
+  organization: Yup.string(),
+  apiKey: Yup.string().required(),
+  compute: Yup.object({
+    cpu: Yup.number().required(),
+    memory: Yup.number().required(),
+  }),
+});
+
+export type AISettingsFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AISettings() {
+  const { maintenanceActive } = useUI();
+  const { openDialog } = useDialog();
+  const [updateConfig] = useUpdateConfigMutation();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [aiServiceEnabled, setAIServiceEnabled] = useState(true);
+
+  const {
+    data: { config: { ai } = {} } = {},
+    loading: loadingAiSettings,
+    error: errorGettingAiSettings,
+  } = useGetAiSettingsQuery({
+    variables: {
+      appId: currentProject.id,
+    },
+  });
+
+  const { data: graphiteVersionsData, loading: loadingGraphiteVersionsData } =
+    useGetSoftwareVersionsQuery({
+      variables: {
+        software: Software_Type_Enum.Graphite,
+      },
+    });
+
+  const graphiteVersions = graphiteVersionsData?.softwareVersions || [];
+
+  const availableVersionsSet = new Set(
+    graphiteVersions.map((el) => el.version),
+  );
+
+  if (ai?.version) {
+    availableVersionsSet.add(ai.version);
+  }
+
+  const availableVersions = Array.from(availableVersionsSet)
+    .sort()
+    .reverse()
+    .map((availableVersion) => ({
+      label: availableVersion,
+      value: availableVersion,
+    }));
+
+  const form = useForm<AISettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      version: {
+        label: ai?.version ?? availableVersions?.at(0)?.label,
+        value: ai?.version ?? availableVersions?.at(0)?.value,
+      },
+      webhookSecret: '',
+      organization: '',
+      apiKey: '',
+      synchPeriodMinutes: 5,
+      compute: {
+        cpu: 125,
+        memory: 256,
+      },
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { register, formState, reset, watch, setValue } = form;
+
+  const aiSettingsFormValues = watch();
+
+  useEffect(() => {
+    if (ai) {
+      reset({
+        version: {
+          label: ai?.version,
+          value: ai?.version,
+        },
+        webhookSecret: ai?.webhookSecret,
+        synchPeriodMinutes: ai?.autoEmbeddings?.synchPeriodMinutes,
+        apiKey: ai?.openai?.apiKey,
+        organization: ai?.openai?.organization,
+        compute: {
+          cpu: ai?.resources?.compute?.cpu ?? 62,
+          memory: ai?.resources?.compute?.memory ?? 128,
+        },
+      });
+    }
+
+    setAIServiceEnabled(!!ai);
+  }, [ai, reset]);
+
+  useEffect(() => {
+    if (
+      !loadingGraphiteVersionsData &&
+      availableVersions.length > 0 &&
+      !ai &&
+      !aiSettingsFormValues.version.value
+    ) {
+      setValue('version', availableVersions?.at(0));
+    }
+  }, [
+    ai,
+    setValue,
+    availableVersions,
+    aiSettingsFormValues,
+    loadingGraphiteVersionsData,
+  ]);
+
+  const toggleAIService = async (enabled: boolean) => {
+    setAIServiceEnabled(enabled);
+
+    if (!enabled && ai) {
+      openDialog({
+        title: 'Confirm Disabling the AI service',
+        component: (
+          <DisableAIServiceConfirmationDialog
+            onCancel={() => setAIServiceEnabled(true)}
+            onServiceDisabled={() => setAIServiceEnabled(false)}
+          />
+        ),
+      });
+    }
+  };
+
+  if (loadingAiSettings || loadingGraphiteVersionsData) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading Postgres version..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (errorGettingAiSettings) {
+    throw errorGettingAiSettings;
+  }
+
+  async function handleSubmit(formValues: AISettingsFormValues) {
+    try {
+      await toast.promise(
+        updateConfig({
+          variables: {
+            appId: currentProject.id,
+            config: {
+              ai: {
+                version: formValues.version.value,
+                webhookSecret: formValues.webhookSecret,
+                autoEmbeddings: {
+                  synchPeriodMinutes: Number(formValues.synchPeriodMinutes),
+                },
+                openai: {
+                  apiKey: formValues.apiKey,
+                  organization: formValues.organization,
+                },
+                resources: {
+                  compute: {
+                    cpu: formValues?.compute?.cpu,
+                    memory: formValues?.compute?.memory,
+                  },
+                },
+              },
+            },
+          },
+        }),
+        {
+          loading: `AI settings are being updated...`,
+          success: `AI settings has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the AI settings!`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  const getAIResourcesCost = () => {
+    const vCPUs = `${
+      aiSettingsFormValues.compute.cpu / RESOURCE_VCPU_MULTIPLIER
+    } vCPUs`;
+    const mem = `${aiSettingsFormValues.compute.memory} MiB Mem`;
+    const details = `${vCPUs} + ${mem}`;
+
+    return `Approximate cost for ${details}`;
+  };
+
+  return (
+    <Box className="space-y-4" sx={{ backgroundColor: 'background.default' }}>
+      <Box className="flex flex-row items-center justify-between rounded-lg border-1 p-4">
+        <Text className="text-lg font-semibold">Enable AI service</Text>
+        <Switch
+          checked={aiServiceEnabled}
+          onChange={(e) => toggleAIService(e.target.checked)}
+          className="self-center"
+        />
+      </Box>
+      {aiServiceEnabled && (
+        <FormProvider {...form}>
+          <Form onSubmit={handleSubmit}>
+            <SettingsContainer
+              title={null}
+              description={null}
+              slotProps={{
+                submitButton: {
+                  disabled: !formState.isDirty || maintenanceActive,
+                  loading: formState.isSubmitting,
+                },
+              }}
+              className="flex flex-col"
+            >
+              <Box className="space-y-4">
+                {availableVersions.length > 0 && (
+                  <Box className="space-y-2">
+                    <Box className="flex flex-row items-center space-x-2">
+                      <Text className="text-lg font-semibold">Version</Text>
+                      <Tooltip title="Version of the service to use.">
+                        <InfoIcon
+                          aria-label="Info"
+                          className="h-4 w-4"
+                          color="primary"
+                        />
+                      </Tooltip>
+                    </Box>
+                    <ControlledAutocomplete
+                      id="version"
+                      name="version"
+                      autoHighlight
+                      isOptionEqualToValue={() => false}
+                      filterOptions={(options, { inputValue }) => {
+                        const inputValueLower = inputValue.toLowerCase();
+                        const matched = [];
+                        const otherOptions = [];
+
+                        options.forEach((option) => {
+                          const optionLabelLower = option.label.toLowerCase();
+
+                          if (optionLabelLower.startsWith(inputValueLower)) {
+                            matched.push(option);
+                          } else {
+                            otherOptions.push(option);
+                          }
+                        });
+
+                        const result = [...matched, ...otherOptions];
+
+                        return result;
+                      }}
+                      fullWidth
+                      className="col-span-4"
+                      options={availableVersions}
+                      error={!!formState.errors?.version?.message}
+                      helperText={formState.errors?.version?.message}
+                      showCustomOption="auto"
+                      customOptionLabel={(value) =>
+                        `Use custom value: "${value}"`
+                      }
+                    />
+                  </Box>
+                )}
+
+                <Box className="space-y-2">
+                  <Box className="flex flex-row items-center space-x-2">
+                    <Text className="text-lg font-semibold">
+                      Webhook Secret
+                    </Text>
+                    <Tooltip title="Used to validate requests between postgres and the AI service. The AI service will also include the header X-Graphite-Webhook-Secret with this value set when calling external webhooks so the source of the request can be validated.">
+                      <InfoIcon
+                        aria-label="Info"
+                        className="h-4 w-4"
+                        color="primary"
+                      />
+                    </Tooltip>
+                  </Box>
+                  <Input
+                    {...register('webhookSecret')}
+                    id="webhookSecret"
+                    name="webhookSecret"
+                    placeholder="Webhook Secret"
+                    className="col-span-3"
+                    fullWidth
+                    hideEmptyHelperText
+                    error={Boolean(formState.errors.webhookSecret?.message)}
+                    helperText={formState.errors.webhookSecret?.message}
+                  />
+                </Box>
+
+                <Box className="space-y-2">
+                  <Box className="flex flex-row items-center space-x-2">
+                    <Text className="text-lg font-semibold">Resources</Text>
+                    <Tooltip title="Dedicated resources allocated for the service.">
+                      <InfoIcon
+                        aria-label="Info"
+                        className="h-4 w-4"
+                        color="primary"
+                      />
+                    </Tooltip>
+                  </Box>
+
+                  <Alert
+                    severity="info"
+                    className="flex items-center justify-between space-x-2"
+                  >
+                    <span>{getAIResourcesCost()}</span>
+                    <b>
+                      $
+                      {parseFloat(
+                        (
+                          aiSettingsFormValues.compute.cpu * COST_PER_VCPU
+                        ).toFixed(2),
+                      )}
+                    </b>
+                  </Alert>
+
+                  <ComputeFormSection />
+                </Box>
+
+                <Box className="space-y-2">
+                  <Text className="text-lg font-semibold">OpenAI</Text>
+
+                  <Input
+                    {...register('apiKey')}
+                    name="apiKey"
+                    placeholder="API Key"
+                    id="apiKey"
+                    label={
+                      <Box className="flex flex-row items-center space-x-2">
+                        <Text>OpenAI API key</Text>
+                        <Tooltip title="Key to use for authenticating API requests to OpenAI">
+                          <InfoIcon
+                            aria-label="Info"
+                            className="h-4 w-4"
+                            color="primary"
+                          />
+                        </Tooltip>
+                      </Box>
+                    }
+                    className="col-span-3"
+                    fullWidth
+                    hideEmptyHelperText
+                    error={Boolean(formState.errors.apiKey?.message)}
+                    helperText={formState.errors.apiKey?.message}
+                  />
+
+                  <Input
+                    {...register('organization')}
+                    id="organization"
+                    name="organization"
+                    label={
+                      <Box className="flex flex-row items-center space-x-2">
+                        <Text>OpenAI Organization</Text>
+                        <Tooltip title="Optional. OpenAI organization to use.">
+                          <InfoIcon
+                            aria-label="Info"
+                            className="h-4 w-4"
+                            color="primary"
+                          />
+                        </Tooltip>
+                      </Box>
+                    }
+                    placeholder="Organization"
+                    className="col-span-3"
+                    fullWidth
+                    hideEmptyHelperText
+                    error={Boolean(formState.errors.organization?.message)}
+                    helperText={formState.errors.organization?.message}
+                  />
+                </Box>
+
+                <Box className="space-y-2">
+                  <Text className="text-lg font-semibold">Auto-Embeddings</Text>
+                  <Input
+                    {...register('synchPeriodMinutes')}
+                    id="synchPeriodMinutes"
+                    name="synchPeriodMinutes"
+                    type="number"
+                    label={
+                      <Box className="flex flex-row items-center space-x-2">
+                        <Text>Synch Period Minutes</Text>
+                        <Tooltip title="How often to run the job that keeps embeddings up to date.">
+                          <InfoIcon
+                            aria-label="Info"
+                            className="h-4 w-4"
+                            color="primary"
+                          />
+                        </Tooltip>
+                      </Box>
+                    }
+                    placeholder="Synch Period Minutes"
+                    fullWidth
+                    className="lg:col-span-2"
+                    error={Boolean(
+                      formState.errors.synchPeriodMinutes?.message,
+                    )}
+                    helperText={formState.errors.synchPeriodMinutes?.message}
+                    slotProps={{
+                      inputRoot: {
+                        min: 0,
+                      },
+                    }}
+                  />
+                </Box>
+              </Box>
+            </SettingsContainer>
+          </Form>
+        </FormProvider>
+      )}
+    </Box>
+  );
+}

dashboard/src/features/ai/settings/components/DisableAIServiceConfirmationDialog/DisableAIServiceConfirmationDialog.tsx

@@ -0,0 +1,105 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useUpdateConfigMutation } from '@/utils/__generated__/graphql';
+import type { ApolloError } from '@apollo/client';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export interface DisableAIServiceConfirmationDialogProps {
+  /**
+   * Function to be called when the user clicks the cancel button.
+   */
+  onCancel: () => void;
+  /**
+   * Function to be called when the user clicks the confirm button.
+   */
+  onServiceDisabled: () => void;
+}
+
+export default function DisableAIServiceConfirmationDialog({
+  onCancel,
+  onServiceDisabled,
+}: DisableAIServiceConfirmationDialogProps) {
+  const { closeDialog } = useDialog();
+  const [loading, setLoading] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [updateConfig] = useUpdateConfigMutation();
+
+  async function handleClick() {
+    setLoading(true);
+
+    await toast.promise(
+      updateConfig({
+        variables: {
+          appId: currentProject.id,
+          config: {
+            ai: null,
+          },
+        },
+      }),
+      {
+        loading: 'Disabling the AI service...',
+        success: () => {
+          onServiceDisabled();
+          closeDialog();
+          return `The service has been disabled.`;
+        },
+        error: (arg: ApolloError) => {
+          // we need to get the internal error message from the GraphQL error
+          const { internal } = arg.graphQLErrors[0]?.extensions || {};
+          const { message } = (internal as Record<string, any>)?.error || {};
+
+          // we use the default Apollo error message if we can't find the
+          // internal error message
+          return (
+            message ||
+            arg.message ||
+            'An error occurred while disabling the AI service. Please try again later.'
+          );
+        },
+      },
+      getToastStyleProps(),
+    );
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 pt-0 text-left')}>
+      <div className="grid grid-flow-row gap-1">
+        <Text variant="subtitle2">
+          Are you sure you want to disable this service?
+        </Text>
+
+        <Text
+          variant="subtitle2"
+          className="font-bold"
+          sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+        >
+          This cannot be undone.
+        </Text>
+
+        <div className="grid grid-flow-row gap-2">
+          <Button color="error" onClick={handleClick} loading={loading}>
+            Disable
+          </Button>
+
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={() => {
+              onCancel();
+              closeDialog();
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/ai/settings/components/DisableAIServiceConfirmationDialog/index.ts

@@ -0,0 +1 @@
+export { default as DisableAIServiceConfirmationDialog } from './DisableAIServiceConfirmationDialog';

dashboard/src/features/ai/settings/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AISettings';
+export { default as AISettings } from './AISettings';

dashboard/src/features/ai/settings/gql/getAISettings.gql

@@ -0,0 +1,21 @@
+query GetAISettings($appId: uuid!) {
+  config(appID: $appId, resolve: false) {
+    ai {
+      version
+      webhookSecret
+      autoEmbeddings {
+        synchPeriodMinutes
+      }
+      openai {
+        apiKey
+        organization
+      }
+      resources {
+        compute {
+          cpu
+          memory
+        }
+      }
+    }
+  }
+}

dashboard/src/features/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx

@@ -3,7 +3,6 @@ import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetAuthenticationSettingsDocument,
@@ -134,12 +133,26 @@ export default function AuthServiceVersionSettings() {
           <ControlledAutocomplete
             id="version"
             name="version"
-            filterOptions={(options, state) => {
-              if (state.inputValue === version) {
-                return options;
-              }
+            autoHighlight
+            isOptionEqualToValue={() => false}
+            filterOptions={(options, { inputValue }) => {
+              const inputValueLower = inputValue.toLowerCase();
+              const matched = [];
+              const otherOptions = [];
 
-              return filterOptions(options, state);
+              options.forEach((option) => {
+                const optionLabelLower = option.label.toLowerCase();
+
+                if (optionLabelLower.startsWith(inputValueLower)) {
+                  matched.push(option);
+                } else {
+                  otherOptions.push(option);
+                }
+              });
+
+              const result = [...matched, ...otherOptions];
+
+              return result;
             }}
             fullWidth
             className="lg:col-span-2"

dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql

@@ -1,5 +1,5 @@
 query GetAuthenticationSettings($appId: uuid!) {
-  config(appID: $appId, resolve: true) {
+  config(appID: $appId, resolve: false) {
     id: __typename
     __typename
     auth {

dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx

@@ -196,14 +196,14 @@ export default function EditUserForm({
         className="flex flex-col overflow-hidden border-t-1 lg:flex-auto lg:content-between"
         onSubmit={onSubmit}
       >
-        <Box className="flex-auto divide-y overflow-y-auto">
+        <Box className="flex-auto overflow-y-auto divide-y">
           <Box
             component="section"
             className="grid grid-flow-col p-6 lg:grid-cols-7"
           >
-            <div className="col-span-6 grid grid-flow-col place-content-start items-center gap-4">
-              <Avatar className="h-12 w-12" src={user.avatarUrl} />
-              <div className="grid grid-flow-row items-center">
+            <div className="grid items-center grid-flow-col col-span-6 gap-4 place-content-start">
+              <Avatar className="w-12 h-12" src={user.avatarUrl} />
+              <div className="grid items-center grid-flow-row">
                 <Text className="text-lg font-medium">{user.displayName}</Text>
                 <Text className="text-sm+ font-normal" color="secondary">
                   {user.email}
@@ -225,7 +225,7 @@ export default function EditUserForm({
                     Actions
                   </Button>
                 </Dropdown.Trigger>
-                <Dropdown.Content menu className="h-full w-full">
+                <Dropdown.Content menu className="w-full h-full">
                   <Dropdown.Item
                     className="font-medium"
                     sx={{ color: 'error.main' }}
@@ -253,11 +253,11 @@ export default function EditUserForm({
             component="section"
             className="grid grid-flow-row grid-cols-4 gap-8 p-6"
           >
-            <InputLabel as="h3" className="col-span-1 self-center">
+            <InputLabel as="h3" className="self-center col-span-1">
               User ID
             </InputLabel>
-            <div className="col-span-3 grid grid-flow-col items-center justify-start gap-2">
-              <Text className="truncate font-medium">{user.id}</Text>
+            <div className="grid items-center justify-start grid-flow-col col-span-3 gap-2">
+              <Text className="font-medium truncate">{user.id}</Text>
               <IconButton
                 variant="borderless"
                 color="secondary"
@@ -267,18 +267,18 @@ export default function EditUserForm({
                   copy(user.id, 'User ID');
                 }}
               >
-                <CopyIcon className="h-4 w-4" />
+                <CopyIcon className="w-4 h-4" />
               </IconButton>
             </div>
 
-            <InputLabel as="h3" className="col-span-1 self-center ">
+            <InputLabel as="h3" className="self-center col-span-1 ">
               Created At
             </InputLabel>
             <Text className="col-span-3 font-medium">
               {format(new Date(user.createdAt), 'yyyy-MM-dd HH:mm:ss')}
             </Text>
 
-            <InputLabel as="h3" className="col-span-1 self-center ">
+            <InputLabel as="h3" className="self-center col-span-1 ">
               Last Seen
             </InputLabel>
             <Text className="col-span-3 font-medium">
@@ -336,14 +336,14 @@ export default function EditUserForm({
               autoComplete="off"
             />
 
-            <div className="col-span-1 my-1 grid grid-flow-col grid-cols-8 items-center">
+            <div className="grid items-center grid-flow-col grid-cols-8 col-span-1 my-1">
               <div className="col-span-2 ">
                 <InputLabel as="h3">Password</InputLabel>
               </div>
               <Button
                 color="primary"
                 variant="borderless"
-                className="col-span-6 place-self-start px-2"
+                className="col-span-6 px-2 place-self-start"
                 onClick={handleChangeUserPassword}
               >
                 Change
@@ -392,12 +392,12 @@ export default function EditUserForm({
           </Box>
           <Box
             component="section"
-            className="grid place-content-start gap-4 p-6 lg:grid-cols-4"
+            className="grid gap-4 p-6 place-content-start lg:grid-cols-4"
           >
-            <div className="col-span-1 items-center self-center align-middle">
+            <div className="items-center self-center col-span-1 align-middle">
               <InputLabel as="h3">OAuth Providers</InputLabel>
             </div>
-            <div className="col-span-3 grid w-full grid-flow-row gap-y-6">
+            <div className="grid w-full grid-flow-row col-span-3 gap-y-6">
               {user.userProviders.length === 0 && (
                 <div className="grid grid-flow-col place-content-between gap-x-1">
                   <Text className="font-normal" color="disabled">
@@ -408,10 +408,10 @@ export default function EditUserForm({
 
               {user.userProviders.map((provider) => (
                 <div
-                  className="grid grid-flow-col place-content-between gap-3"
+                  className="grid grid-flow-col gap-3 place-content-between"
                   key={provider.id}
                 >
-                  <div className="span-cols-1 grid grid-flow-col gap-2">
+                  <div className="grid grid-flow-col gap-2 span-cols-1">
                     <Image
                       src={
                         theme.palette.mode === 'dark'
@@ -424,6 +424,7 @@ export default function EditUserForm({
                       }
                       width={25}
                       height={25}
+                      alt='Oauth provider logo'
                     />
                     <Text className="font-medium capitalize">
                       {getReadableProviderName(provider.providerId)}
@@ -436,7 +437,7 @@ export default function EditUserForm({
           {!isAnonymous && (
             <Box
               component="section"
-              className="grid grid-flow-row gap-y-10 p-6"
+              className="grid grid-flow-row p-6 gap-y-10"
             >
               <ControlledSelect
                 {...register('defaultRole')}
@@ -456,11 +457,11 @@ export default function EditUserForm({
                   </Option>
                 ))}
               </ControlledSelect>
-              <div className="grid grid-flow-row place-content-start gap-6 lg:grid-flow-col lg:grid-cols-8">
+              <div className="grid grid-flow-row gap-6 place-content-start lg:grid-flow-col lg:grid-cols-8">
                 <InputLabel as="h3" className="col-span-2">
                   Allowed Roles
                 </InputLabel>
-                <div className="col-span-3 grid grid-flow-row gap-6">
+                <div className="grid grid-flow-row col-span-3 gap-6">
                   {roles.map((role, i) => (
                     <ControlledCheckbox
                       id={`roles.${i}`}
@@ -476,7 +477,7 @@ export default function EditUserForm({
           )}
         </Box>
 
-        <Box className="grid w-full flex-shrink-0 snap-end grid-flow-col justify-between gap-3 place-self-end border-t-1 p-2">
+        <Box className="grid justify-between flex-shrink-0 w-full grid-flow-col gap-3 p-2 snap-end place-self-end border-t-1">
           <Button
             variant="outlined"
             color="secondary"

dashboard/src/features/authentication/users/components/UsersBody/UsersBody.tsx

@@ -226,12 +226,12 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
 
   if (!users) {
     return (
-      <div className="h-screen w-screen overflow-hidden">
-        <div className="absolute top-0 left-0 z-50 block h-full w-full">
-          <span className="top50percent relative top-1/2 mx-auto my-0 block">
+      <div className="w-screen h-screen overflow-hidden">
+        <div className="absolute top-0 left-0 z-50 block w-full h-full">
+          <span className="relative block mx-auto my-0 top50percent top-1/2">
             <ActivityIndicator
               label="Loading users..."
-              className="my-auto flex items-center justify-center"
+              className="flex items-center justify-center my-auto"
             />
           </span>
         </div>
@@ -269,7 +269,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                     }}
                     className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                   >
-                    <UserIcon className="h-4 w-4" />
+                    <UserIcon className="w-4 h-4" />
                     <Text className="font-medium">View User</Text>
                   </Dropdown.Item>
 
@@ -280,7 +280,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                     sx={{ color: 'error.main' }}
                     onClick={() => handleDeleteUser(user)}
                   >
-                    <TrashIcon className="h-4 w-4" />
+                    <TrashIcon className="w-4 h-4" />
                     <Text className="font-medium" color="error">
                       Delete User
                     </Text>
@@ -294,14 +294,14 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
               onClick={() => handleViewUser(user)}
               aria-label={`View ${user.displayName}`}
             >
-              <div className="col-span-2 grid grid-flow-col place-content-start gap-4">
+              <div className="grid grid-flow-col col-span-2 gap-4 place-content-start">
                 <Avatar
                   src={user.avatarUrl}
                   alt={`Avatar of ${user.displayName}`}
                 />
-                <div className="grid grid-flow-row items-center">
-                  <div className="grid grid-flow-col items-center gap-2">
-                    <Text className="truncate font-medium leading-5">
+                <div className="grid items-center grid-flow-row">
+                  <div className="grid items-center grid-flow-col gap-2">
+                    <Text className="font-medium leading-5 truncate">
                       {user.displayName}
                     </Text>
                     {user.disabled && (
@@ -314,7 +314,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                     )}
                   </div>
 
-                  <Text className="truncate font-normal" color="secondary">
+                  <Text className="font-normal truncate" color="secondary">
                     {user.email}
                   </Text>
                 </div>
@@ -334,7 +334,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                   : '-'}
               </Text>
 
-              <div className="col-span-2 hidden grid-flow-col place-content-start gap-3 px-4 lg:grid">
+              <div className="hidden grid-flow-col col-span-2 gap-3 px-4 place-content-start lg:grid">
                 {user.userProviders.length === 0 && (
                   <Text className="col-span-3 font-medium">-</Text>
                 )}
@@ -362,6 +362,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                         }
                         width={16}
                         height={16}
+                        alt='Oauth provider logo'
                       />
                     }
                   />

dashboard/src/features/database/dataGrid/components/BaseColumnForm/BaseColumnForm.tsx

@@ -102,10 +102,10 @@ export default function BaseColumnForm({
   return (
     <Form
       onSubmit={handleExternalSubmit}
-      className="flex flex-auto flex-col content-between overflow-hidden border-t-1"
+      className="flex flex-col content-between flex-auto overflow-hidden border-t-1"
     >
       <div className="flex-auto overflow-y-auto">
-        <section className="grid grid-cols-8 py-3 px-6">
+        <section className="grid grid-cols-8 px-6 py-3">
           <Input
             {...register('name', {
               onChange: (event) => {
@@ -184,7 +184,7 @@ export default function BaseColumnForm({
                   </Text>
                 </span>
               }
-              className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+              className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
               onChange={(_event, checked) => {
                 if (checked) {
                   setDefaultValueInputText('');
@@ -197,7 +197,7 @@ export default function BaseColumnForm({
 
         <Box
           component="section"
-          className="grid grid-cols-8 border-t-1 py-3 px-6"
+          className="grid grid-cols-8 px-6 py-3 border-t-1"
         >
           <ControlledAutocomplete
             id="defaultValue"
@@ -249,7 +249,7 @@ export default function BaseColumnForm({
           />
 
           <ControlledCheckbox
-            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
             name="isNullable"
             label={
               <span className="inline-grid grid-flow-row">
@@ -269,7 +269,7 @@ export default function BaseColumnForm({
           />
 
           <ControlledCheckbox
-            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
             name="isUnique"
             label={
               <span className="inline-grid grid-flow-row">
@@ -306,7 +306,7 @@ export default function BaseColumnForm({
         </Box>
       </div>
 
-      <Box className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 p-2">
+      <Box className="grid justify-between flex-shrink-0 grid-flow-col gap-3 p-2 border-t-1">
         <Button
           variant="borderless"
           color="secondary"

dashboard/src/features/database/dataGrid/components/BaseForeignKeyForm/BaseForeignKeyForm.tsx

@@ -107,9 +107,9 @@ export default function BaseForeignKeyForm({
             selectedColumn?.isPrimary || selectedColumn?.isUnique || false,
         });
       }}
-      className="flex flex-auto flex-col content-between overflow-hidden pb-4"
+      className="flex flex-col content-between flex-auto pb-4 overflow-hidden"
     >
-      <Box className="grid flex-auto grid-flow-row gap-4 overflow-y-auto border-t-1 py-4">
+      <Box className="grid flex-auto grid-flow-row gap-4 py-4 overflow-y-auto border-t-1">
         <Box component="section" className="grid grid-flow-row gap-4 px-6">
           <Text variant="h3">From</Text>
 
@@ -185,7 +185,7 @@ export default function BaseForeignKeyForm({
         </Box>
       </Box>
 
-      <Box className="grid flex-shrink-0 grid-flow-row gap-2 border-t-1 px-6 pt-4">
+      <Box className="grid flex-shrink-0 grid-flow-row gap-2 px-6 pt-4 border-t-1">
         <Button loading={isSubmitting} disabled={isSubmitting} type="submit">
           {submitButtonText}
         </Button>