31 |
32 |
34 |
35 | )
36 | }
--------------------------------------------------------------------------------
/.github/workflows/release-workflow.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | release:
5 | types: published
6 |
7 | jobs:
8 | script:
9 | name: "Publish tracking script to npm"
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - uses: actions/checkout@v1
14 | - name: Use Node.js
15 | uses: actions/setup-node@v4
16 | with:
17 | node-version: 22.x
18 | - name: npm install, build, and test
19 | run: |
20 | npm install --prefix middleware
21 | npm run lint --prefix middleware --if-present
22 | npm run test:coverage --prefix middleware --if-present
23 | npm run build --prefix middleware
24 | env:
25 | CI: true
26 | - name: npm publish
27 | run: |
28 | npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
29 | npm publish ./middleware --access public
30 | env:
31 | CI: true
32 | NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
33 |
--------------------------------------------------------------------------------
/tinybird/materializations/tenant_actions.pipe:
--------------------------------------------------------------------------------
1 | DESCRIPTION >
2 | Materializes distinct actions by tenant and domain from analytics events
3 |
4 | NODE tenant_actions_node
5 | DESCRIPTION >
6 | Aggregate distinct actions per tenant/domain with last payload sample
7 |
8 | SQL >
9 | with multiIf(domain != '', domain, current_domain != '', current_domain, domain_from_payload) as domain,
10 | JSONExtractString(payload, 'domain') as domain_from_payload,
11 | if(domainWithoutWWW(href) = '' and href is not null and href != '', URLHierarchy(href)[1], domainWithoutWWW(href)) as current_domain,
12 | JSONExtractString(payload, 'href') as href
13 | SELECT
14 | tenant_id,
15 | domain,
16 | action,
17 | anySimpleState(payload) AS last_payload,
18 | maxSimpleState(timestamp) AS last_seen,
19 | countState() AS total_occurrences
20 | FROM analytics_events
21 | GROUP BY tenant_id, domain, action
22 |
23 | TYPE MATERIALIZED
24 | DATASOURCE tenant_actions_mv
--------------------------------------------------------------------------------
/tinybird/endpoints/actions.pipe:
--------------------------------------------------------------------------------
1 | DESCRIPTION >
2 | Use to understand the different action types (page_hit, web_vital, etc.) and a sample payload for each tenant and domain
3 | Filter by action_filter to not get the whole table, it's a SQL like filter (e.g. "%web_%")
4 |
5 | TOKEN "dashboard" READ
6 |
7 | NODE endpoint
8 | DESCRIPTION >
9 | Get distinct actions for a specific tenant across all domains
10 |
11 | SQL >
12 | %
13 | SELECT
14 | domain,
15 | action,
16 | anySimpleState(last_payload) AS last_payload,
17 | maxSimpleState(last_seen) AS last_seen,
18 | countMerge(total_occurrences) AS total_occurrences
19 | FROM tenant_actions_mv
20 | WHERE tenant_id = {{ String(tenant_id, description="Tenant ID to filter actions for", default="") }}
21 | {% if defined(action_filter) %}
22 | AND action like {{String(action_filter, description="A like filter to search for actions", example="%cli_%")}}
23 | {% end %}
24 | GROUP BY domain, action
25 | ORDER BY last_seen DESC, domain ASC, action ASC
26 |
27 | TYPE endpoint
--------------------------------------------------------------------------------
/middleware/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@tinybirdco/flock.js",
3 | "version": "1.7.0",
4 | "main": "dist/index.js",
5 | "description": "Tinybird web analytics tracking script",
6 | "author": "Tinybird team",
7 | "source": [
8 | "src/index.html"
9 | ],
10 | "targets": {
11 | "main": false
12 | },
13 | "scripts": {
14 | "start": "parcel",
15 | "watch": "parcel watch",
16 | "build": "parcel build --no-source-maps"
17 | },
18 | "license": "MIT",
19 | "devDependencies": {
20 | "parcel": "^2.7.0"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "https://github.com/tinybirdco/web-analytics-starter-kit"
25 | },
26 | "dependencies": {
27 | "node-fetch": "^2.6.6",
28 | "web-vitals": "^5.0.3"
29 | },
30 | "keywords": [
31 | "tinybird",
32 | "analytics",
33 | "library",
34 | "data",
35 | "operational"
36 | ],
37 | "bugs": {
38 | "url": "https://github.com/tinybirdco/web-analytics-starter-kit/issues"
39 | },
40 | "homepage": "https://github.com/tinybirdco/web-analytics-starter-kit#README"
41 | }
42 |
--------------------------------------------------------------------------------
/.github/workflows/tinybird-ci.yml:
--------------------------------------------------------------------------------
1 |
2 | name: Tinybird - CI Workflow
3 |
4 | on:
5 | workflow_dispatch:
6 | pull_request:
7 | branches:
8 | - main
9 | types: [opened, reopened, labeled, unlabeled, synchronize]
10 |
11 | concurrency: ${{ github.workflow }}-${{ github.event.pull_request.number }}
12 |
13 | env:
14 | TINYBIRD_HOST: ${{ secrets.TINYBIRD_HOST }}
15 | TINYBIRD_TOKEN: ${{ secrets.TINYBIRD_TOKEN }}
16 |
17 | jobs:
18 | ci:
19 | runs-on: ubuntu-latest
20 | defaults:
21 | run:
22 | working-directory: 'tinybird'
23 | services:
24 | tinybird:
25 | image: tinybirdco/tinybird-local:latest
26 | ports:
27 | - 7181:7181
28 | steps:
29 | - uses: actions/checkout@v3
30 | - name: Install Tinybird CLI
31 | run: curl https://tinybird.co | sh
32 | - name: Build project
33 | run: tb build
34 | - name: Test project
35 | run: tb test run
36 | # - name: Deployment check
37 | # run: tb --cloud --host ${{ env.TINYBIRD_HOST }} --token ${{ env.TINYBIRD_TOKEN }} deploy --check
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Tinybird.co
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/workflows/ci-workflow.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [ push ]
4 |
5 | jobs:
6 | dashboard:
7 | runs-on: ubuntu-latest
8 |
9 | steps:
10 | - uses: actions/checkout@v1
11 | - name: Use Node.js 22
12 | uses: actions/setup-node@v4
13 | with:
14 | node-version: 22.x
15 | cache: 'npm'
16 | cache-dependency-path: dashboard/package-lock.json
17 | - name: npm install, build
18 | run: |
19 | npm install --prefix dashboard
20 | npm run lint --prefix dashboard --if-present
21 | npm run build --prefix dashboard
22 | env:
23 | CI: true
24 |
25 | script:
26 | runs-on: ubuntu-latest
27 |
28 | steps:
29 | - uses: actions/checkout@v1
30 | - name: Use Node.js 22
31 | uses: actions/setup-node@v4
32 | with:
33 | node-version: 22.x
34 | cache: 'npm'
35 | cache-dependency-path: middleware/package-lock.json
36 | - name: npm install, build
37 | run: |
38 | npm install --prefix middleware
39 | npm run lint --prefix middleware --if-present
40 | npm run build --prefix middleware
41 | env:
42 | CI: true
43 |
--------------------------------------------------------------------------------
/dashboard/mocks/handlers.ts:
--------------------------------------------------------------------------------
1 | import { http } from 'msw'
2 |
3 | export const data = {
4 | meta: [
5 | {
6 | name: 't',
7 | type: 'DateTime',
8 | },
9 | {
10 | name: 'visits',
11 | type: 'UInt64',
12 | },
13 | ],
14 | data: [
15 | {
16 | t: '2022-09-14 22:57:00',
17 | visits: 1,
18 | },
19 | {
20 | t: '2022-09-14 22:58:00',
21 | visits: 1,
22 | },
23 | {
24 | t: '2022-09-14 22:59:00',
25 | visits: 2,
26 | },
27 | {
28 | t: '2022-09-14 23:00:00',
29 | visits: 1,
30 | },
31 | {
32 | t: '2022-09-14 23:01:00',
33 | visits: 2,
34 | },
35 | ],
36 | rows: 30,
37 | statistics: {
38 | elapsed: 0.003924389,
39 | rows_read: 5137,
40 | bytes_read: 338977,
41 | },
42 | }
43 |
44 | // Define handlers that catch the corresponding requests and returns the mock data.
45 | export const handlers = [
46 | http.get('https://analytics-api.com/v0/pipes/trend.json', ({ request, params, cookies }) => {
47 | return new Response(
48 | JSON.stringify(data),
49 | {
50 | headers: { 'Content-Type': 'application/json' },
51 | status: 200,
52 | }
53 | )
54 | }),
55 | ]
56 |
--------------------------------------------------------------------------------
/dashboard/components/ui/Badge.module.css:
--------------------------------------------------------------------------------
1 | .base {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 | white-space: nowrap;
6 | border-radius: 48px;
7 | font-size: 12px;
8 | line-height: 16px;
9 | font-weight: 500;
10 | transition: all 0.2s ease;
11 | border: 1px solid transparent;
12 | font-family: var(--font-family-mono);
13 | }
14 |
15 | /* Size variants */
16 | .sizeSmall {
17 | padding: 2px 6px;
18 | font-size: 11px;
19 | line-height: 14px;
20 | }
21 |
22 | .sizeMedium {
23 | padding: 4px 8px;
24 | font-size: 12px;
25 | line-height: 16px;
26 | }
27 |
28 | .sizeLarge {
29 | padding: 6px 12px;
30 | font-size: 14px;
31 | line-height: 18px;
32 | }
33 |
34 | /* Color variants */
35 | .default {
36 | background-color: var(--background-02-color, #f3f4f6);
37 | color: var(--text-02-color, #6b7280);
38 | }
39 |
40 | .success {
41 | background-color: #f0fdf4;
42 | color: var(--text-brand-dark-color);
43 | }
44 |
45 | .warning {
46 | background-color: #fffbeb;
47 | color: #d97706;
48 | }
49 |
50 | .error {
51 | background-color: #fef2f2;
52 | color: var(--text-error-color);
53 | }
54 |
55 | .info {
56 | background-color: #eff6ff;
57 | color: #2563eb;
58 | }
59 |
--------------------------------------------------------------------------------
/dashboard/lib/hooks/use-current-visitors.ts:
--------------------------------------------------------------------------------
1 | import useSWR from 'swr'
2 | import { querySQL, queryPipe, getConfig } from '../api'
3 | import { useSearchParams } from 'next/navigation'
4 |
5 | async function getCurrentVisitors(domainParam?: string): Promise
15 |
18 | )
19 | }
20 |
21 | // Example 2: Custom styling
22 | export function CustomStyledExample() {
23 | return (
24 | Analytics Dashboard
16 |
25 |
31 | )
32 | }
33 |
34 | // Example 3: Advanced usage with custom layout
35 | export function AdvancedExample() {
36 | return (
37 |
38 |
51 | )
52 | }
53 |
54 | // Example 4: Embedding in a modal or sidebar
55 | export function ModalExample() {
56 | return (
57 |
39 |
41 |
43 |
44 | Analytics Dashboard
40 |
45 |
47 |
49 |
50 | Chat History
46 |
58 |
66 | )
67 | }
--------------------------------------------------------------------------------
/dashboard/lib/constants/metrics.ts:
--------------------------------------------------------------------------------
1 | // Metric thresholds for Core Web Vitals (ms for all except CLS)
2 | export const METRIC_THRESHOLDS: Record
59 |
65 | AI Assistant
60 |{shortcut}
64 | )}
65 |
26 |
32 |
38 |
44 |
50 |
51 | )
52 | }
53 |
54 | export function Spinner() {
55 | return (
56 |
57 |
68 | )
69 | }
70 |
71 | export function SpinnerCircle() {
72 | return (
73 |
65 |
67 |
74 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/dashboard/components/ai-chat/AIChatProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { createContext, useContext, ReactNode, useState } from 'react'
4 | import { useChat } from '@ai-sdk/react'
5 | import { useSearchParams } from 'next/navigation'
6 |
7 | interface AIChatContextType {
8 | messages: any[]
9 | input: string
10 | setInput: React.Dispatch
82 |
84 |
88 | {status !== 'ready' ? (
89 |
94 | {getToolLabel(toolName)}
95 |
96 |
97 | )
98 | }
99 |
100 | return null
101 | }
102 |
--------------------------------------------------------------------------------
/dashboard/components/ui/Dialog.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as DialogPrimitive from '@radix-ui/react-dialog'
5 | import styles from './Dialog.module.css'
6 |
7 | const Dialog = DialogPrimitive.Root
8 |
9 | const DialogTrigger = DialogPrimitive.Trigger
10 |
11 | const DialogPortal = DialogPrimitive.Portal
12 |
13 | const DialogClose = DialogPrimitive.Close
14 |
15 | const DialogOverlay = React.forwardRef<
16 | React.ElementRef
33 |
37 | )
38 | }
39 |
40 | // Delta indicator cell
41 | export function TableCellDelta({ delta }: { delta: number }) {
42 | const isPositive = delta > 0
43 | const isNegative = delta < 0
44 | const color = isPositive ? styles.deltaPositive : isNegative ? styles.deltaNegative : styles.deltaNeutral
45 | const sign = isPositive ? '+' : ''
46 | return (
47 |
48 | {sign}{delta?.toLocaleString()}%
49 |
50 | )
51 | }
52 |
53 | // Combined cell for layouts like number + progress, number + delta, etc.
54 | export function TableCellCombined({ children }: { children: React.ReactNode }) {
55 | return
34 |
35 |
36 | {children}
56 | }
57 |
58 | export function TableCellCountry({ code }: { code: string }) {
59 | const countryCode = code?.toUpperCase?.() || ''
60 | const name = countries[countryCode as keyof typeof countries] || countryCode || '(unknown)'
61 | const Flag = (Flags as any)[countryCode]
62 | return (
63 |
64 | {Flag ? (
65 |
66 |
90 |
93 | )
94 | }
95 | ```
96 |
97 | ### Custom Styling
98 | ```tsx
99 | import { AIChatStandalone } from '@/components/ai-chat'
100 |
101 | function MyPage() {
102 | return (
103 | My Analytics Dashboard
91 |
104 |
110 | )
111 | }
112 | ```
113 |
114 | ### Advanced Usage with Custom Components
115 | ```tsx
116 | import {
117 | AIChatProvider,
118 | AIChatForm,
119 | AIChatContainer
120 | } from '@/components/ai-chat'
121 |
122 | function MyCustomChat() {
123 | return (
124 |
126 |
129 |
145 | Your App
146 |
147 |
149 |
150 | )
151 | }
152 | ```
153 |
154 | ## Dependencies
155 |
156 | The components depend on:
157 | - `@ai-sdk/react` for chat functionality
158 | - Existing UI components from `@/components/ui/`
159 | - CSS variables for theming
160 |
161 | Make sure these dependencies are available in your target application.
--------------------------------------------------------------------------------
/tinybird/web_vitals/endpoints/web_vitals_current.pipe:
--------------------------------------------------------------------------------
1 | DESCRIPTION >
2 | Returns current web vitals metrics (LCP, TTFB, FCP, INP, CLS) with average values over a configurable time period (defaults to 1 day), calculated scores, and detailed metric descriptions with units and scoring ranges.
3 |
4 | TOKEN "dashboard" READ
5 |
6 | NODE daily_vitals
7 | DESCRIPTION >
8 | Get web vital metrics aggregated over the specified time period with averages and metadata.
9 | Note: Unrealistic values (>60s for timing metrics, >1 for CLS) are filtered out as they indicate measurement errors.
10 |
11 | SQL >
12 |
13 | %
14 | SELECT
15 | metric_name,
16 | avg(value) as avg_value,
17 | quantile(0.75)(value) as p75,
18 | quantile(0.90)(value) as p90,
19 | quantile(0.95)(value) as p95,
20 | quantile(0.99)(value) as p99,
21 | avg(delta) as avg_delta,
22 | count() as measurements,
23 | any(units) as units,
24 | any(description) as description,
25 | any(thresholds_text) as thresholds_text,
26 | domain,
27 | tenant_id
28 | FROM web_vitals_events
29 | WHERE timestamp >= now() - interval {{Int32(days, 1, description="Number of days to analyze (defaults to 1 day)")}} day
30 | {% if defined(tenant_id) %}
31 | AND tenant_id = {{ String(tenant_id, description="Filter by tenant ID") }}
32 | {% end %}
33 | {% if defined(domain) %}
34 | AND domain = {{ String(domain, description="Domain to filter web vitals for") }}
35 | {% end %}
36 | GROUP BY metric_name, domain, tenant_id
37 | HAVING measurements >= 1
38 |
39 | NODE endpoint
40 | DESCRIPTION >
41 | Calculate scores and status using built-in metadata from web_vitals_events
42 |
43 | SQL >
44 | SELECT
45 | metric_name,
46 | round(avg_value, 2) as avg_value,
47 | round(p75, 2) as p75,
48 | round(p90, 2) as p90,
49 | round(p90, 2) as p90,
50 | round(p95, 2) as p95,
51 | round(p99, 2) as p99,
52 | measurements,
53 | -- Calculate score based on thresholds (using same logic as web_vitals_events)
54 | CASE
55 | WHEN metric_name = 'LCP' AND avg_value <= 2500 THEN 100
56 | WHEN metric_name = 'LCP' AND avg_value <= 4000 THEN 75
57 | WHEN metric_name = 'TTFB' AND avg_value <= 500 THEN 100
58 | WHEN metric_name = 'TTFB' AND avg_value <= 1000 THEN 75
59 | WHEN metric_name = 'FCP' AND avg_value <= 1800 THEN 100
60 | WHEN metric_name = 'FCP' AND avg_value <= 3000 THEN 75
61 | WHEN metric_name = 'INP' AND avg_value <= 200 THEN 100
62 | WHEN metric_name = 'INP' AND avg_value <= 500 THEN 75
63 | WHEN metric_name = 'CLS' AND avg_value <= 0.1 THEN 100
64 | WHEN metric_name = 'CLS' AND avg_value <= 0.25 THEN 75
65 | ELSE 25
66 | END as score,
67 | -- Calculate status based on thresholds
68 | CASE
69 | WHEN metric_name = 'LCP' AND avg_value <= 2500 THEN 'Excellent'
70 | WHEN metric_name = 'LCP' AND avg_value <= 4000 THEN 'Good'
71 | WHEN metric_name = 'TTFB' AND avg_value <= 500 THEN 'Excellent'
72 | WHEN metric_name = 'TTFB' AND avg_value <= 1000 THEN 'Good'
73 | WHEN metric_name = 'FCP' AND avg_value <= 1800 THEN 'Excellent'
74 | WHEN metric_name = 'FCP' AND avg_value <= 3000 THEN 'Good'
75 | WHEN metric_name = 'INP' AND avg_value <= 200 THEN 'Excellent'
76 | WHEN metric_name = 'INP' AND avg_value <= 500 THEN 'Good'
77 | WHEN metric_name = 'CLS' AND avg_value <= 0.1 THEN 'Excellent'
78 | WHEN metric_name = 'CLS' AND avg_value <= 0.25 THEN 'Good'
79 | ELSE 'Poor'
80 | END as status,
81 | units,
82 | description,
83 | thresholds_text as thresholds,
84 | domain,
85 | tenant_id
86 | FROM daily_vitals
87 | ORDER BY metric_name
88 |
89 | TYPE endpoint
--------------------------------------------------------------------------------
/dashboard/components/ai-chat/AIChatContainer.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react'
4 | import { useAIChat } from './AIChatProvider'
5 | import { AIChatForm } from './AIChatForm'
6 | import { AIChatMessage } from './AIChatMessage'
7 | import { cn } from '@/lib/utils'
8 | import { Text } from '../ui/Text'
9 | import { motion } from 'motion/react'
10 | import { Card } from '../ui/Card'
11 | import { Loader } from '../ui/Loader'
12 |
13 | interface AIChatContainerProps {
14 | placeholder?: string
15 | className?: string
16 | showForm?: boolean
17 | }
18 |
19 | const AIChatCredits = () => {
20 | return (
21 |
28 | 
29 |
30 | Powered by Tinybird
31 |
32 |
33 |
34 |
29 |
56 |
92 | )
93 | }
94 |
95 | export function AIChatContainer({
96 | placeholder,
97 | className = '',
98 | showForm = true,
99 | }: AIChatContainerProps) {
100 | const { messages, isLoading, error, status } = useAIChat()
101 |
102 | const cards = messages
103 | .filter(
104 | (message: any) =>
105 | message.role === 'system' || message.role === 'assistant'
106 | )
107 | .map((message: any, index: number) => ({
108 | message,
109 | index,
110 | }))
111 |
112 | return (
113 |
63 |
77 |
82 |
89 |
90 |
91 |
83 |
85 | Analyzing your question…
86 |
87 |
88 |
114 |
129 | )
130 | }
131 |
--------------------------------------------------------------------------------
/dashboard/components/ui/Button.module.css:
--------------------------------------------------------------------------------
1 | .base {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | gap: 8px;
6 | white-space: nowrap;
7 | border-radius: 4px;
8 | border: 2px solid;
9 | border-color: transparent;
10 | font-size: 14px;
11 | line-height: 20px;
12 | font-weight: 600;
13 | transition: colors 0.2s;
14 | cursor: pointer;
15 | font: var(--font-button);
16 | }
17 |
18 | .content {
19 | display: inline-flex;
20 | align-items: center;
21 | justify-content: flex-start;
22 | gap: 8px;
23 | white-space: nowrap;
24 | position: relative;
25 | width: 100%;
26 | }
27 |
28 | .fullWidth {
29 | width: 100%;
30 | }
31 |
32 | .fullWidth .content {
33 | justify-content: center;
34 | }
35 |
36 | .base:focus-visible {
37 | outline: none;
38 | }
39 |
40 | .base:disabled {
41 | opacity: 0.5;
42 | cursor: not-allowed;
43 | }
44 |
45 | .base svg {
46 | pointer-events: none;
47 | width: 16px;
48 | height: 16px;
49 | flex-shrink: 0;
50 | }
51 |
52 | .primary.solid {
53 | background-color: var(--primary-color);
54 | color: var(--text-color);
55 | }
56 |
57 | .primary.solid:hover:not(:disabled),
58 | .primary.solid:focus-visible:not(:disabled) {
59 | border-color: var(--primary-dark-color);
60 | }
61 |
62 | .error.solid {
63 | background-color: var(--error-color);
64 | color: var(--text-inverse-color);
65 | }
66 |
67 | .error.solid:hover:not(:disabled),
68 | .error.solid:focus-visible:not(:disabled) {
69 | border-color: var(--error-dark-color);
70 | }
71 |
72 | .error.outline {
73 | border-width: 1px;
74 | border-color: var(--error-color);
75 | color: var(--error-color);
76 | }
77 |
78 | .error.outline:hover:not(:disabled),
79 | .error.outline:focus-visible:not(:disabled) {
80 | border-color: var(--error-dark-color);
81 | }
82 |
83 | .dark.solid {
84 | background-color: var(--background-dark-01-color);
85 | color: var(--text-inverse-color);
86 | }
87 |
88 | .dark.solid:hover:not(:disabled),
89 | .dark.solid:focus-visible:not(:disabled) {
90 | border-color: transparent;
91 | }
92 |
93 | .dark.outline {
94 | border-width: 1px;
95 | border-color: var(--border-03-color);
96 | color: var(--text-inverse-color);
97 | background-color: var(--background-dark-color);
98 | }
99 |
100 | .dark.outline:hover:not(:disabled),
101 | .dark.outline:focus-visible:not(:disabled) {
102 | border-color: var(--border-03-color);
103 | box-shadow: inset 0 0 0 1px var(--border-03-color);
104 | }
105 |
106 | .secondary.outline {
107 | border-width: 1px;
108 | border-color: var(--border-02-color);
109 | color: var(--secondary-color);
110 | background-color: var(--neutral-00-color);
111 | }
112 |
113 | .secondary.outline:hover:not(:disabled),
114 | .secondary.outline:focus-visible:not(:disabled) {
115 | border-color: var(--border-03-color);
116 | box-shadow: inset 0 0 0 1px var(--border-03-color);
117 | }
118 |
119 | .secondary.text {
120 | color: var(--secondary-color);
121 | padding: 0;
122 | }
123 |
124 | .secondary.text:hover:not(:disabled),
125 | .secondary.text:focus-visible:not(:disabled) {
126 | color: var(--secondary-dark-color);
127 | }
128 |
129 | .error.text {
130 | color: var(--error-color);
131 | padding: 0;
132 | }
133 |
134 | .sizeSmall {
135 | height: 24px;
136 | padding: 0 8px;
137 | }
138 |
139 | .sizeSmall.outline {
140 | font-weight: 400;
141 | }
142 |
143 | .sizeMedium {
144 | height: 32px;
145 | padding: 0 12px;
146 | }
147 |
148 | .sizeLarge {
149 | height: 40px;
150 | padding: 0 16px;
151 | }
152 |
153 | .loading > *:not(.loadingOverlay) {
154 | opacity: 0;
155 | }
156 |
157 | .loading {
158 | color: transparent;
159 | }
160 |
161 | .loadingOverlay {
162 | position: absolute;
163 | inset: 0;
164 | display: grid;
165 | place-content: center;
166 | color: var(--text-color);
167 | z-index: 1;
168 | & + *,
169 | & + * + *,
170 | & + * + * + * {
171 | opacity: 0;
172 | }
173 | }
174 |
175 | .sizeIcon {
176 | padding: 0;
177 | height: 24px;
178 | }
179 |
--------------------------------------------------------------------------------
/dashboard/components/ui/Text.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { cn } from '@/lib/utils'
4 | import { forwardRef, useRef } from 'react'
5 | import ContentEditable from 'react-contenteditable'
6 | import styles from './Text.module.css'
7 | import DOMPurify from 'dompurify'
8 |
9 | export type TextVariant =
10 | | 'displaysmall'
11 | | 'displayxsmall'
12 | | 'displaysmall'
13 | | 'displaymedium'
14 | | 'heading'
15 | | 'body'
16 | | 'bodysemibold'
17 | | 'link'
18 | | 'linksemibold'
19 | | 'code'
20 | | 'button'
21 | | 'caption'
22 | | 'captionbold'
23 | | 'captioncode'
24 | | 'captionlink'
25 | | 'captionsemibold'
26 | | 'smallcaptionbold'
27 |
28 | export type TextColor =
29 | | 'default'
30 | | 'alternative'
31 | | '01'
32 | | '02'
33 | | 'inverse'
34 | | 'brand'
35 | | 'error'
36 | | 'inherit'
37 | | 'preview'
38 |
39 | export type TextAlign = 'left' | 'center' | 'right'
40 |
41 | export type TextProps = React.ComponentProps<'span'> & {
42 | as?: React.ElementType
43 | variant?: TextVariant
44 | color?: TextColor
45 | style?: React.CSSProperties
46 | align?: TextAlign
47 | decoration?: React.CSSProperties['textDecoration']
48 | truncate?: boolean
49 | role?: React.AriaRole
50 | htmlFor?: string
51 | }
52 |
53 | export const Text = forwardRef
119 | {cards.map(({ message, index }) => {
120 | return (
121 |
128 |
31 | {children}
32 |
33 |
39 | {children}
40 |
41 | )
42 | }
43 |
44 | export function AIChatForm({
45 | placeholder = 'Are there any bounce rate trends for my blog pages?',
46 | className = '',
47 | }: AIChatFormProps) {
48 | const {
49 | input,
50 | handleInputChange,
51 | handleSubmit,
52 | isLoading,
53 | error,
54 | setMessages,
55 | setInput,
56 | lastSubmittedQuestion,
57 | } = useAIChat()
58 |
59 | const messagesEndRef = useRef
105 |
139 |
140 |
141 |