@gram-ai/elements 1.27.4 → 1.27.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -60
- package/README.typedoc.md +6 -6
- package/bin/cli.js +74 -74
- package/dist/compat-shims-CO9JXXV4.cjs.map +1 -1
- package/dist/{compat-shims-BPJ7Q68c.js → compat-shims-DxtUrORi.js} +4 -2
- package/dist/compat-shims-DxtUrORi.js.map +1 -0
- package/dist/components/ShareButton/index.d.ts +2 -2
- package/dist/components/assistant-ui/message-feedback.d.ts +1 -1
- package/dist/components/assistant-ui/tooltip-icon-button.d.ts +2 -2
- package/dist/components/ui/avatar.d.ts +2 -2
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/components/ui/calendar.d.ts +1 -1
- package/dist/components/ui/collapsible.d.ts +1 -1
- package/dist/components/ui/dialog.d.ts +4 -4
- package/dist/components/ui/popover.d.ts +2 -2
- package/dist/components/ui/skeleton.d.ts +1 -1
- package/dist/components/ui/time-range-picker.d.ts +1 -1
- package/dist/components/ui/tool-ui.d.ts +7 -7
- package/dist/components/ui/tooltip.d.ts +2 -2
- package/dist/contexts/ConnectionStatusContext.d.ts +1 -1
- package/dist/elements.cjs +1 -1
- package/dist/elements.js +2 -2
- package/dist/hooks/useDensity.d.ts +73 -73
- package/dist/hooks/useMCPTools.d.ts +1 -1
- package/dist/hooks/useRadius.d.ts +1 -1
- package/dist/{index-BpJstUh1.cjs → index-C4bFBGfl.cjs} +4 -4
- package/dist/{index-BpJstUh1.cjs.map → index-C4bFBGfl.cjs.map} +1 -1
- package/dist/{index-CUitXazZ.js → index-D93pV0_o.js} +55 -55
- package/dist/{index-CUitXazZ.js.map → index-D93pV0_o.js.map} +1 -1
- package/dist/{index-D0bAYNQy.js → index-DuCQRbcQ.js} +279 -265
- package/dist/index-DuCQRbcQ.js.map +1 -0
- package/dist/{index-KSX4Qjip.cjs → index-y_PNN5vK.cjs} +10 -10
- package/dist/index-y_PNN5vK.cjs.map +1 -0
- package/dist/lib/cassette.d.ts +4 -4
- package/dist/lib/errorTracking.d.ts +1 -1
- package/dist/lib/messageConverter.d.ts +1 -1
- package/dist/lib/models.d.ts +1 -1
- package/dist/plugins/chart/ui/bar-chart.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/accordion-wrapper.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/accordion.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/action-button.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/alert-wrapper.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/alert.d.ts +4 -4
- package/dist/plugins/generative-ui/ui/avatar.d.ts +5 -5
- package/dist/plugins/generative-ui/ui/badge.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/button-wrapper.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/button.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/card-wrapper.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/card.d.ts +8 -8
- package/dist/plugins/generative-ui/ui/checkbox.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/data-table.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/dialog.d.ts +3 -3
- package/dist/plugins/generative-ui/ui/dropdown-menu.d.ts +3 -3
- package/dist/plugins/generative-ui/ui/grid.d.ts +3 -3
- package/dist/plugins/generative-ui/ui/input-wrapper.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/input.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/label.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/metric.d.ts +3 -3
- package/dist/plugins/generative-ui/ui/pagination.d.ts +6 -6
- package/dist/plugins/generative-ui/ui/popover.d.ts +4 -4
- package/dist/plugins/generative-ui/ui/progress.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/radio-group.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/select.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/separator.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/skeleton.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/stack.d.ts +6 -6
- package/dist/plugins/generative-ui/ui/switch.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/table.d.ts +9 -9
- package/dist/plugins/generative-ui/ui/tabs-wrapper.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/tabs.d.ts +1 -1
- package/dist/plugins/generative-ui/ui/text.d.ts +3 -3
- package/dist/plugins/generative-ui/ui/textarea.d.ts +2 -2
- package/dist/plugins/generative-ui/ui/tooltip.d.ts +1 -1
- package/dist/plugins.cjs +1 -1
- package/dist/plugins.js +1 -1
- package/dist/{profiler-BFkhZRxj.js → profiler-FpBY9eRv.js} +2 -2
- package/dist/{profiler-BFkhZRxj.js.map → profiler-FpBY9eRv.js.map} +1 -1
- package/dist/{profiler-CyzxBxVz.cjs → profiler-_mthyjvo.cjs} +2 -2
- package/dist/{profiler-CyzxBxVz.cjs.map → profiler-_mthyjvo.cjs.map} +1 -1
- package/dist/react-shim.js +1 -1
- package/dist/server/express.cjs.map +1 -1
- package/dist/server/express.js.map +1 -1
- package/dist/{startRecording-Dq92sEHf.cjs → startRecording-NJcpiHw-.cjs} +2 -2
- package/dist/{startRecording-Dq92sEHf.cjs.map → startRecording-NJcpiHw-.cjs.map} +1 -1
- package/dist/{startRecording-C-PPAs_Z.js → startRecording-r5MXQ2Dm.js} +2 -2
- package/dist/{startRecording-C-PPAs_Z.js.map → startRecording-r5MXQ2Dm.js.map} +1 -1
- package/dist/types/index.d.ts +2 -2
- package/package.json +1 -5
- package/src/compat-plugin.ts +14 -14
- package/src/compat-shims.ts +33 -31
- package/src/compat.test.ts +48 -48
- package/src/compat.ts +6 -6
- package/src/components/Chat/index.tsx +17 -17
- package/src/components/Chat/stories/Charts.stories.tsx +98 -98
- package/src/components/Chat/stories/Composer.stories.tsx +15 -15
- package/src/components/Chat/stories/ConnectionConfiguration.stories.tsx +44 -44
- package/src/components/Chat/stories/CustomComponents.stories.tsx +17 -17
- package/src/components/Chat/stories/Density.stories.tsx +20 -20
- package/src/components/Chat/stories/ErrorBoundary.stories.tsx +47 -47
- package/src/components/Chat/stories/FrontendTools.stories.tsx +39 -39
- package/src/components/Chat/stories/GenerativeUI.stories.tsx +48 -48
- package/src/components/Chat/stories/MessageFeedback.stories.tsx +52 -52
- package/src/components/Chat/stories/Modal.stories.tsx +28 -28
- package/src/components/Chat/stories/Model.stories.tsx +11 -11
- package/src/components/Chat/stories/Radius.stories.tsx +20 -20
- package/src/components/Chat/stories/Sidecar.stories.tsx +13 -13
- package/src/components/Chat/stories/StyleIsolation.stories.tsx +11 -11
- package/src/components/Chat/stories/Theme.stories.tsx +25 -25
- package/src/components/Chat/stories/Thread.stories.tsx +25 -25
- package/src/components/Chat/stories/ToolApproval.stories.tsx +55 -55
- package/src/components/Chat/stories/ToolMentions.stories.tsx +17 -17
- package/src/components/Chat/stories/Tools.stories.tsx +88 -88
- package/src/components/Chat/stories/Variants.stories.tsx +32 -32
- package/src/components/Chat/stories/Welcome.stories.tsx +14 -14
- package/src/components/ChatHistory.tsx +7 -7
- package/src/components/FrontendTools/index.tsx +5 -5
- package/src/components/Replay.stories.tsx +157 -157
- package/src/components/Replay.tsx +76 -73
- package/src/components/ShadowRoot.tsx +40 -40
- package/src/components/ShareButton/index.tsx +32 -32
- package/src/components/assistant-ui/assistant-modal.tsx +92 -87
- package/src/components/assistant-ui/assistant-sidecar.tsx +35 -35
- package/src/components/assistant-ui/attachment.tsx +80 -80
- package/src/components/assistant-ui/connection-status-indicator.tsx +33 -33
- package/src/components/assistant-ui/error-boundary.tsx +34 -34
- package/src/components/assistant-ui/follow-on-suggestions.tsx +26 -26
- package/src/components/assistant-ui/markdown-text.tsx +69 -69
- package/src/components/assistant-ui/mentioned-tools-badges.tsx +38 -38
- package/src/components/assistant-ui/message-feedback.tsx +57 -50
- package/src/components/assistant-ui/reasoning.tsx +83 -83
- package/src/components/assistant-ui/thread-list.tsx +45 -45
- package/src/components/assistant-ui/thread.tsx +278 -278
- package/src/components/assistant-ui/tool-fallback.tsx +37 -37
- package/src/components/assistant-ui/tool-group.tsx +26 -26
- package/src/components/assistant-ui/tool-mention-autocomplete.tsx +122 -122
- package/src/components/assistant-ui/tooltip-icon-button.tsx +18 -18
- package/src/components/ui/avatar.tsx +12 -12
- package/src/components/ui/button.tsx +12 -12
- package/src/components/ui/buttonVariants.ts +17 -17
- package/src/components/ui/calendar.tsx +106 -106
- package/src/components/ui/charts.stories.tsx +56 -56
- package/src/components/ui/collapsible.tsx +5 -5
- package/src/components/ui/dialog.tsx +30 -30
- package/src/components/ui/generative-ui.stories.tsx +200 -200
- package/src/components/ui/generative-ui.tsx +26 -26
- package/src/components/ui/popover.tsx +14 -14
- package/src/components/ui/skeleton.tsx +5 -5
- package/src/components/ui/time-range-picker.stories.tsx +80 -80
- package/src/components/ui/time-range-picker.tsx +245 -244
- package/src/components/ui/tool-ui.stories.tsx +37 -37
- package/src/components/ui/tool-ui.tsx +221 -215
- package/src/components/ui/tooltip.tsx +15 -15
- package/src/constants/tailwind.ts +1 -1
- package/src/contexts/ChatIdContext.tsx +7 -7
- package/src/contexts/ConnectionStatusContext.tsx +64 -64
- package/src/contexts/ElementsProvider.tsx +214 -213
- package/src/contexts/ReplayContext.ts +3 -3
- package/src/contexts/ToolApprovalContext.tsx +54 -54
- package/src/contexts/ToolExecutionContext.tsx +34 -34
- package/src/contexts/contexts.ts +7 -7
- package/src/contexts/portal-container-context.ts +2 -2
- package/src/contexts/portal-container.tsx +7 -7
- package/src/embedded.ts +1 -1
- package/src/global.css +25 -25
- package/src/hooks/useAuth.ts +72 -72
- package/src/hooks/useDensity.ts +79 -79
- package/src/hooks/useElements.ts +6 -6
- package/src/hooks/useExpanded.ts +12 -12
- package/src/hooks/useFollowOnSuggestions.ts +83 -83
- package/src/hooks/useGramThreadListAdapter.tsx +99 -99
- package/src/hooks/useMCPTools.ts +47 -47
- package/src/hooks/useModel.ts +14 -14
- package/src/hooks/usePluginComponents.ts +11 -11
- package/src/hooks/usePortalContainer.ts +5 -5
- package/src/hooks/useRadius.ts +23 -23
- package/src/hooks/useRecordCassette.ts +34 -34
- package/src/hooks/useSession.ts +11 -11
- package/src/hooks/useThemeProps.ts +13 -13
- package/src/hooks/useThreadId.ts +4 -4
- package/src/hooks/useToolApproval.ts +7 -7
- package/src/hooks/useToolMentions.ts +40 -40
- package/src/index.ts +26 -26
- package/src/lib/api.test.ts +61 -61
- package/src/lib/api.ts +4 -3
- package/src/lib/auth.ts +13 -13
- package/src/lib/cassette.ts +84 -84
- package/src/lib/easing.ts +1 -1
- package/src/lib/errorTracking.config.ts +5 -5
- package/src/lib/errorTracking.ts +29 -29
- package/src/lib/generative-ui.ts +7 -7
- package/src/lib/humanize.ts +3 -3
- package/src/lib/messageConverter.test.ts +130 -127
- package/src/lib/messageConverter.ts +196 -196
- package/src/lib/models.ts +21 -20
- package/src/lib/token.test.ts +56 -56
- package/src/lib/token.ts +14 -14
- package/src/lib/tool-mentions.ts +45 -45
- package/src/lib/tools.ts +66 -62
- package/src/lib/utils.ts +5 -5
- package/src/lib.d.ts +1 -1
- package/src/plugins/README.md +5 -5
- package/src/plugins/chart/catalog.ts +18 -18
- package/src/plugins/chart/chart.test.ts +31 -31
- package/src/plugins/chart/component.tsx +34 -34
- package/src/plugins/chart/index.ts +4 -4
- package/src/plugins/chart/ui/area-chart.tsx +42 -42
- package/src/plugins/chart/ui/bar-chart.tsx +46 -46
- package/src/plugins/chart/ui/donut-chart.tsx +48 -48
- package/src/plugins/chart/ui/index.ts +7 -7
- package/src/plugins/chart/ui/line-chart.tsx +43 -43
- package/src/plugins/chart/ui/pie-chart.tsx +44 -44
- package/src/plugins/chart/ui/radar-chart.tsx +33 -33
- package/src/plugins/chart/ui/scatter-chart.tsx +43 -43
- package/src/plugins/components/MacOSWindowFrame.tsx +15 -15
- package/src/plugins/components/PluginLoadingState.tsx +10 -10
- package/src/plugins/components/index.ts +1 -1
- package/src/plugins/generative-ui/catalog.ts +54 -54
- package/src/plugins/generative-ui/component.tsx +85 -85
- package/src/plugins/generative-ui/index.ts +4 -4
- package/src/plugins/generative-ui/ui/accordion-wrapper.tsx +16 -16
- package/src/plugins/generative-ui/ui/accordion.tsx +16 -16
- package/src/plugins/generative-ui/ui/action-button.tsx +28 -28
- package/src/plugins/generative-ui/ui/alert-wrapper.tsx +8 -8
- package/src/plugins/generative-ui/ui/alert.tsx +20 -20
- package/src/plugins/generative-ui/ui/avatar-wrapper.tsx +7 -7
- package/src/plugins/generative-ui/ui/avatar.tsx +30 -30
- package/src/plugins/generative-ui/ui/badge.tsx +22 -22
- package/src/plugins/generative-ui/ui/button-wrapper.tsx +12 -12
- package/src/plugins/generative-ui/ui/button.tsx +28 -28
- package/src/plugins/generative-ui/ui/card-wrapper.tsx +8 -8
- package/src/plugins/generative-ui/ui/card.tsx +27 -27
- package/src/plugins/generative-ui/ui/checkbox-wrapper.tsx +9 -9
- package/src/plugins/generative-ui/ui/checkbox.tsx +9 -9
- package/src/plugins/generative-ui/ui/data-table.tsx +8 -8
- package/src/plugins/generative-ui/ui/dialog.tsx +31 -31
- package/src/plugins/generative-ui/ui/dropdown-menu.tsx +44 -44
- package/src/plugins/generative-ui/ui/grid.tsx +12 -12
- package/src/plugins/generative-ui/ui/index.ts +40 -40
- package/src/plugins/generative-ui/ui/input-wrapper.tsx +11 -11
- package/src/plugins/generative-ui/ui/input.tsx +9 -9
- package/src/plugins/generative-ui/ui/label.tsx +8 -8
- package/src/plugins/generative-ui/ui/list.tsx +11 -11
- package/src/plugins/generative-ui/ui/metric.tsx +23 -23
- package/src/plugins/generative-ui/ui/pagination.tsx +28 -28
- package/src/plugins/generative-ui/ui/popover.tsx +21 -21
- package/src/plugins/generative-ui/ui/progress.tsx +13 -13
- package/src/plugins/generative-ui/ui/radio-group.tsx +12 -12
- package/src/plugins/generative-ui/ui/select-wrapper.tsx +7 -7
- package/src/plugins/generative-ui/ui/select.tsx +37 -37
- package/src/plugins/generative-ui/ui/separator.tsx +9 -9
- package/src/plugins/generative-ui/ui/skeleton-wrapper.tsx +10 -10
- package/src/plugins/generative-ui/ui/skeleton.tsx +5 -5
- package/src/plugins/generative-ui/ui/stack.tsx +28 -28
- package/src/plugins/generative-ui/ui/switch.tsx +11 -11
- package/src/plugins/generative-ui/ui/table.tsx +32 -32
- package/src/plugins/generative-ui/ui/tabs-wrapper.tsx +11 -11
- package/src/plugins/generative-ui/ui/tabs.tsx +26 -26
- package/src/plugins/generative-ui/ui/text.tsx +12 -12
- package/src/plugins/generative-ui/ui/textarea.tsx +7 -7
- package/src/plugins/generative-ui/ui/tooltip.tsx +12 -12
- package/src/plugins/index.ts +7 -7
- package/src/react-shim.ts +6 -6
- package/src/server/bun.ts +12 -12
- package/src/server/core.ts +25 -25
- package/src/server/express.ts +17 -15
- package/src/server/fastify.ts +14 -14
- package/src/server/hono.ts +9 -9
- package/src/server/nextjs.ts +12 -12
- package/src/server/tanstack-start.ts +12 -12
- package/src/server.ts +27 -27
- package/src/storybook.d.ts +4 -4
- package/src/types/index.ts +122 -122
- package/src/types/plugins.ts +7 -7
- package/src/vite-env.d.ts +12 -12
- package/dist/compat-shims-BPJ7Q68c.js.map +0 -1
- package/dist/index-D0bAYNQy.js.map +0 -1
- package/dist/index-KSX4Qjip.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -48,88 +48,100 @@ We provide framework-specific adapters to make it easy to set up a backend endpo
|
|
|
48
48
|
### Express
|
|
49
49
|
|
|
50
50
|
```typescript
|
|
51
|
-
import { createExpressHandler } from
|
|
52
|
-
import express from
|
|
53
|
-
|
|
54
|
-
const app = express()
|
|
55
|
-
app.use(express.json())
|
|
56
|
-
|
|
57
|
-
app.post(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
51
|
+
import { createExpressHandler } from "@gram-ai/elements/server/express";
|
|
52
|
+
import express from "express";
|
|
53
|
+
|
|
54
|
+
const app = express();
|
|
55
|
+
app.use(express.json());
|
|
56
|
+
|
|
57
|
+
app.post(
|
|
58
|
+
"/chat/session",
|
|
59
|
+
createExpressHandler({
|
|
60
|
+
embedOrigin: "http://localhost:3000",
|
|
61
|
+
userIdentifier: "user-123",
|
|
62
|
+
expiresAfter: 3600, // optional, max 3600 seconds
|
|
63
|
+
}),
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
app.listen(3000);
|
|
64
67
|
```
|
|
65
68
|
|
|
66
69
|
For dynamic options based on the request:
|
|
67
70
|
|
|
68
71
|
```typescript
|
|
69
|
-
app.post(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
app.post(
|
|
73
|
+
"/chat/session",
|
|
74
|
+
createExpressHandler((req) => ({
|
|
75
|
+
embedOrigin: req.headers.origin || "http://localhost:3000",
|
|
76
|
+
userIdentifier: req.user?.id || "anonymous",
|
|
77
|
+
expiresAfter: 3600,
|
|
78
|
+
})),
|
|
79
|
+
);
|
|
74
80
|
```
|
|
75
81
|
|
|
76
82
|
### Next.js App Router
|
|
77
83
|
|
|
78
84
|
```typescript
|
|
79
85
|
// app/chat/session/route.ts
|
|
80
|
-
import { createNextHandler } from
|
|
86
|
+
import { createNextHandler } from "@gram-ai/elements/server/nextjs";
|
|
81
87
|
|
|
82
88
|
export const POST = createNextHandler({
|
|
83
|
-
embedOrigin:
|
|
84
|
-
userIdentifier:
|
|
89
|
+
embedOrigin: "http://localhost:3000",
|
|
90
|
+
userIdentifier: "user-123",
|
|
85
91
|
expiresAfter: 3600,
|
|
86
|
-
})
|
|
87
|
-
import { cookies } from
|
|
92
|
+
});
|
|
93
|
+
import { cookies } from "next/headers";
|
|
88
94
|
|
|
89
95
|
export const POST = createNextHandler(async (request) => {
|
|
90
|
-
const cookieStore = await cookies()
|
|
91
|
-
const userId = cookieStore.get(
|
|
96
|
+
const cookieStore = await cookies();
|
|
97
|
+
const userId = cookieStore.get("userId")?.value || "anonymous";
|
|
92
98
|
|
|
93
99
|
return {
|
|
94
|
-
embedOrigin: request.headers.get(
|
|
100
|
+
embedOrigin: request.headers.get("origin") || "http://localhost:3000",
|
|
95
101
|
userIdentifier: userId,
|
|
96
102
|
expiresAfter: 3600,
|
|
97
|
-
}
|
|
98
|
-
})
|
|
103
|
+
};
|
|
104
|
+
});
|
|
99
105
|
```
|
|
100
106
|
|
|
101
107
|
### Fastify
|
|
102
108
|
|
|
103
109
|
```typescript
|
|
104
|
-
import { createFastifyHandler } from
|
|
105
|
-
import Fastify from
|
|
110
|
+
import { createFastifyHandler } from "@gram-ai/elements/server/fastify";
|
|
111
|
+
import Fastify from "fastify";
|
|
106
112
|
|
|
107
|
-
const fastify = Fastify()
|
|
113
|
+
const fastify = Fastify();
|
|
108
114
|
|
|
109
|
-
fastify.post(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
115
|
+
fastify.post(
|
|
116
|
+
"/chat/session",
|
|
117
|
+
createFastifyHandler({
|
|
118
|
+
embedOrigin: "http://localhost:3000",
|
|
119
|
+
userIdentifier: "user-123",
|
|
120
|
+
expiresAfter: 3600,
|
|
121
|
+
}),
|
|
122
|
+
);
|
|
114
123
|
|
|
115
|
-
fastify.listen({ port: 3000 })
|
|
124
|
+
fastify.listen({ port: 3000 });
|
|
116
125
|
```
|
|
117
126
|
|
|
118
127
|
### Hono
|
|
119
128
|
|
|
120
129
|
```typescript
|
|
121
|
-
import { createHonoHandler } from
|
|
122
|
-
import { Hono } from
|
|
130
|
+
import { createHonoHandler } from "@gram-ai/elements/server/hono";
|
|
131
|
+
import { Hono } from "hono";
|
|
123
132
|
|
|
124
|
-
const app = new Hono()
|
|
133
|
+
const app = new Hono();
|
|
125
134
|
|
|
126
|
-
app.post(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
135
|
+
app.post(
|
|
136
|
+
"/chat/session",
|
|
137
|
+
createHonoHandler({
|
|
138
|
+
embedOrigin: "http://localhost:3000",
|
|
139
|
+
userIdentifier: "user-123",
|
|
140
|
+
expiresAfter: 3600,
|
|
141
|
+
}),
|
|
142
|
+
);
|
|
131
143
|
|
|
132
|
-
export default app
|
|
144
|
+
export default app;
|
|
133
145
|
```
|
|
134
146
|
|
|
135
147
|
### Environment Variables
|
|
@@ -284,12 +296,12 @@ export const App = () => {
|
|
|
284
296
|
You can also import and use plugins individually:
|
|
285
297
|
|
|
286
298
|
```typescript
|
|
287
|
-
import { chart } from
|
|
299
|
+
import { chart } from "@gram-ai/elements/plugins";
|
|
288
300
|
|
|
289
301
|
const config: ElementsConfig = {
|
|
290
302
|
// ... other config
|
|
291
303
|
plugins: [chart],
|
|
292
|
-
}
|
|
304
|
+
};
|
|
293
305
|
```
|
|
294
306
|
|
|
295
307
|
### Using Custom Plugins
|
|
@@ -352,17 +364,17 @@ import {
|
|
|
352
364
|
GramElementsProvider,
|
|
353
365
|
Chat,
|
|
354
366
|
useRecordCassette,
|
|
355
|
-
} from
|
|
367
|
+
} from "@gram-ai/elements";
|
|
356
368
|
|
|
357
369
|
function RecordableChat() {
|
|
358
|
-
const { isRecording, startRecording, download } = useRecordCassette()
|
|
370
|
+
const { isRecording, startRecording, download } = useRecordCassette();
|
|
359
371
|
return (
|
|
360
372
|
<>
|
|
361
373
|
<Chat />
|
|
362
374
|
<button onClick={startRecording}>Record</button>
|
|
363
|
-
<button onClick={() => download(
|
|
375
|
+
<button onClick={() => download("demo")}>Save</button>
|
|
364
376
|
</>
|
|
365
|
-
)
|
|
377
|
+
);
|
|
366
378
|
}
|
|
367
379
|
```
|
|
368
380
|
|
|
@@ -371,15 +383,15 @@ function RecordableChat() {
|
|
|
371
383
|
Use the `<Replay>` component, which replaces `GramElementsProvider` entirely:
|
|
372
384
|
|
|
373
385
|
```tsx
|
|
374
|
-
import { Replay, Chat } from
|
|
375
|
-
import cassette from
|
|
386
|
+
import { Replay, Chat } from "@gram-ai/elements";
|
|
387
|
+
import cassette from "./demo.cassette.json";
|
|
376
388
|
|
|
377
389
|
function MarketingDemo() {
|
|
378
390
|
return (
|
|
379
|
-
<Replay cassette={cassette} config={{ variant:
|
|
391
|
+
<Replay cassette={cassette} config={{ variant: "standalone" }}>
|
|
380
392
|
<Chat />
|
|
381
393
|
</Replay>
|
|
382
|
-
)
|
|
394
|
+
);
|
|
383
395
|
}
|
|
384
396
|
```
|
|
385
397
|
|
|
@@ -405,13 +417,13 @@ React 18 and 19 work out of the box. For React 16 or 17, you need to configure y
|
|
|
405
417
|
Add the compatibility plugin to your Vite config:
|
|
406
418
|
|
|
407
419
|
```typescript
|
|
408
|
-
import react from
|
|
409
|
-
import { reactCompat } from
|
|
410
|
-
import { defineConfig } from
|
|
420
|
+
import react from "@vitejs/plugin-react";
|
|
421
|
+
import { reactCompat } from "@gram-ai/elements/compat";
|
|
422
|
+
import { defineConfig } from "vite";
|
|
411
423
|
|
|
412
424
|
export default defineConfig({
|
|
413
425
|
plugins: [react(), reactCompat()],
|
|
414
|
-
})
|
|
426
|
+
});
|
|
415
427
|
```
|
|
416
428
|
|
|
417
429
|
This automatically shims React 18 APIs (`useSyncExternalStore`, `useId`, `useInsertionEffect`) so that Elements and its dependencies work correctly on older React versions.
|
package/README.typedoc.md
CHANGED
|
@@ -9,12 +9,12 @@ Please follow the [Setup Instructions](./README.md#setup) in the main README to
|
|
|
9
9
|
The minimal configuration required to get Elements setup is demonstrated below:
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
|
-
import type { ElementsConfig } from
|
|
12
|
+
import type { ElementsConfig } from "@gram-ai/elements";
|
|
13
13
|
|
|
14
14
|
const config: ElementsConfig = {
|
|
15
|
-
mcp:
|
|
16
|
-
projectSlug:
|
|
17
|
-
}
|
|
15
|
+
mcp: "https://app.getgram.ai/mcp/your-mcp-slug",
|
|
16
|
+
projectSlug: "your-project-slug",
|
|
17
|
+
};
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
The `mcp` and `projectSlug` values can be retrieved from the MCP and project pages respectively.
|
|
@@ -24,11 +24,11 @@ The `mcp` and `projectSlug` values can be retrieved from the MCP and project pag
|
|
|
24
24
|
`@gram-ai/elements` supports React 16.8+, React 17, React 18, and React 19. React 18 and 19 work out of the box. For React 16 or 17, add the compatibility plugin to your Vite config:
|
|
25
25
|
|
|
26
26
|
```ts
|
|
27
|
-
import { reactCompat } from
|
|
27
|
+
import { reactCompat } from "@gram-ai/elements/compat";
|
|
28
28
|
|
|
29
29
|
export default defineConfig({
|
|
30
30
|
plugins: [react(), reactCompat()],
|
|
31
|
-
})
|
|
31
|
+
});
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
React 16 and React 17 are not regularly tested — please reach out to us for support if you run into any issues with these versions.
|
package/bin/cli.js
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
|
-
import { execSync } from
|
|
4
|
-
import { existsSync, readFileSync } from
|
|
5
|
-
import { resolve, dirname } from
|
|
6
|
-
import { fileURLToPath } from
|
|
3
|
+
import { execSync } from "node:child_process";
|
|
4
|
+
import { existsSync, readFileSync } from "node:fs";
|
|
5
|
+
import { resolve, dirname } from "node:path";
|
|
6
|
+
import { fileURLToPath } from "node:url";
|
|
7
7
|
|
|
8
8
|
// Colors
|
|
9
9
|
const c = {
|
|
10
|
-
reset:
|
|
11
|
-
bold:
|
|
12
|
-
dim:
|
|
13
|
-
cyan:
|
|
14
|
-
green:
|
|
15
|
-
yellow:
|
|
16
|
-
red:
|
|
17
|
-
magenta:
|
|
18
|
-
blue:
|
|
19
|
-
bgCyan:
|
|
20
|
-
bgBlue:
|
|
21
|
-
white:
|
|
22
|
-
}
|
|
10
|
+
reset: "\x1b[0m",
|
|
11
|
+
bold: "\x1b[1m",
|
|
12
|
+
dim: "\x1b[2m",
|
|
13
|
+
cyan: "\x1b[36m",
|
|
14
|
+
green: "\x1b[32m",
|
|
15
|
+
yellow: "\x1b[33m",
|
|
16
|
+
red: "\x1b[31m",
|
|
17
|
+
magenta: "\x1b[35m",
|
|
18
|
+
blue: "\x1b[34m",
|
|
19
|
+
bgCyan: "\x1b[46m",
|
|
20
|
+
bgBlue: "\x1b[44m",
|
|
21
|
+
white: "\x1b[37m",
|
|
22
|
+
};
|
|
23
23
|
|
|
24
24
|
// Read peer dependencies from package.json (excluding @types/* packages)
|
|
25
|
-
const __dirname = dirname(fileURLToPath(import.meta.url))
|
|
25
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
26
26
|
const packageJson = JSON.parse(
|
|
27
|
-
readFileSync(resolve(__dirname,
|
|
28
|
-
)
|
|
27
|
+
readFileSync(resolve(__dirname, "../package.json"), "utf-8"),
|
|
28
|
+
);
|
|
29
29
|
const PEER_DEPS = Object.keys(packageJson.peerDependencies || {}).filter(
|
|
30
|
-
(dep) => !dep.startsWith(
|
|
31
|
-
)
|
|
30
|
+
(dep) => !dep.startsWith("@types/"),
|
|
31
|
+
);
|
|
32
32
|
|
|
33
|
-
const PACKAGE_NAME =
|
|
33
|
+
const PACKAGE_NAME = "@gram-ai/elements";
|
|
34
34
|
|
|
35
35
|
function detectPackageManager() {
|
|
36
|
-
const cwd = process.cwd()
|
|
36
|
+
const cwd = process.cwd();
|
|
37
37
|
|
|
38
38
|
// Check for lockfiles
|
|
39
39
|
if (
|
|
40
|
-
existsSync(resolve(cwd,
|
|
41
|
-
existsSync(resolve(cwd,
|
|
40
|
+
existsSync(resolve(cwd, "bun.lockb")) ||
|
|
41
|
+
existsSync(resolve(cwd, "bun.lock"))
|
|
42
42
|
) {
|
|
43
|
-
return
|
|
43
|
+
return "bun";
|
|
44
44
|
}
|
|
45
|
-
if (existsSync(resolve(cwd,
|
|
46
|
-
return
|
|
45
|
+
if (existsSync(resolve(cwd, "pnpm-lock.yaml"))) {
|
|
46
|
+
return "pnpm";
|
|
47
47
|
}
|
|
48
|
-
if (existsSync(resolve(cwd,
|
|
49
|
-
return
|
|
48
|
+
if (existsSync(resolve(cwd, "yarn.lock"))) {
|
|
49
|
+
return "yarn";
|
|
50
50
|
}
|
|
51
|
-
if (existsSync(resolve(cwd,
|
|
52
|
-
return
|
|
51
|
+
if (existsSync(resolve(cwd, "package-lock.json"))) {
|
|
52
|
+
return "npm";
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
// Check for npm_config_user_agent (set when running via npx/pnpm dlx/etc)
|
|
56
|
-
const userAgent = process.env.npm_config_user_agent ||
|
|
57
|
-
if (userAgent.includes(
|
|
58
|
-
if (userAgent.includes(
|
|
59
|
-
if (userAgent.includes(
|
|
56
|
+
const userAgent = process.env.npm_config_user_agent || "";
|
|
57
|
+
if (userAgent.includes("bun")) return "bun";
|
|
58
|
+
if (userAgent.includes("pnpm")) return "pnpm";
|
|
59
|
+
if (userAgent.includes("yarn")) return "yarn";
|
|
60
60
|
|
|
61
61
|
// Default to npm
|
|
62
|
-
return
|
|
62
|
+
return "npm";
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
function getInstallCommand(pm, packages) {
|
|
66
|
-
const pkgString = packages.join(
|
|
66
|
+
const pkgString = packages.join(" ");
|
|
67
67
|
switch (pm) {
|
|
68
|
-
case
|
|
69
|
-
return `bun add ${pkgString}
|
|
70
|
-
case
|
|
71
|
-
return `pnpm add ${pkgString}
|
|
72
|
-
case
|
|
73
|
-
return `yarn add ${pkgString}
|
|
74
|
-
case
|
|
68
|
+
case "bun":
|
|
69
|
+
return `bun add ${pkgString}`;
|
|
70
|
+
case "pnpm":
|
|
71
|
+
return `pnpm add ${pkgString}`;
|
|
72
|
+
case "yarn":
|
|
73
|
+
return `yarn add ${pkgString}`;
|
|
74
|
+
case "npm":
|
|
75
75
|
default:
|
|
76
|
-
return `npm install ${pkgString}
|
|
76
|
+
return `npm install ${pkgString}`;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
function run(command) {
|
|
81
|
-
console.log(`\n ${c.dim}$${c.reset} ${c.cyan}${command}${c.reset}\n`)
|
|
81
|
+
console.log(`\n ${c.dim}$${c.reset} ${c.cyan}${command}${c.reset}\n`);
|
|
82
82
|
try {
|
|
83
|
-
execSync(command, { stdio:
|
|
84
|
-
return true
|
|
83
|
+
execSync(command, { stdio: "inherit", cwd: process.cwd() });
|
|
84
|
+
return true;
|
|
85
85
|
} catch {
|
|
86
|
-
return false
|
|
86
|
+
return false;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
@@ -97,50 +97,50 @@ ${c.bold}Commands:${c.reset}
|
|
|
97
97
|
|
|
98
98
|
${c.bold}Examples:${c.reset}
|
|
99
99
|
${c.dim}$${c.reset} npx ${c.cyan}${PACKAGE_NAME}${c.reset} install
|
|
100
|
-
`)
|
|
100
|
+
`);
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
function install() {
|
|
104
|
-
const pm = detectPackageManager()
|
|
104
|
+
const pm = detectPackageManager();
|
|
105
105
|
|
|
106
106
|
console.log(`
|
|
107
107
|
${c.bold}⚡ Installing Gram Elements${c.reset}
|
|
108
108
|
|
|
109
109
|
${c.dim}Package manager:${c.reset} ${c.cyan}${pm}${c.reset}
|
|
110
|
-
`)
|
|
110
|
+
`);
|
|
111
111
|
|
|
112
112
|
// Install everything in one command
|
|
113
113
|
console.log(
|
|
114
|
-
`${c.yellow}○${c.reset} Installing ${c.cyan}@gram-ai/elements${c.reset} and peer dependencies
|
|
115
|
-
)
|
|
116
|
-
const allPackages = [...PEER_DEPS, PACKAGE_NAME]
|
|
117
|
-
const cmd = getInstallCommand(pm, allPackages)
|
|
114
|
+
`${c.yellow}○${c.reset} Installing ${c.cyan}@gram-ai/elements${c.reset} and peer dependencies...`,
|
|
115
|
+
);
|
|
116
|
+
const allPackages = [...PEER_DEPS, PACKAGE_NAME];
|
|
117
|
+
const cmd = getInstallCommand(pm, allPackages);
|
|
118
118
|
if (!run(cmd)) {
|
|
119
|
-
console.error(`\n${c.red}✖${c.reset} Failed to install packages`)
|
|
120
|
-
process.exit(1)
|
|
119
|
+
console.error(`\n${c.red}✖${c.reset} Failed to install packages`);
|
|
120
|
+
process.exit(1);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
console.log(`
|
|
124
124
|
${c.green}${c.bold}✔ Installation complete!${c.reset}
|
|
125
|
-
`)
|
|
125
|
+
`);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
// Main
|
|
129
|
-
const command = process.argv[2]
|
|
129
|
+
const command = process.argv[2];
|
|
130
130
|
|
|
131
131
|
switch (command) {
|
|
132
|
-
case
|
|
133
|
-
case
|
|
134
|
-
install()
|
|
135
|
-
break
|
|
136
|
-
case
|
|
137
|
-
case
|
|
138
|
-
case
|
|
132
|
+
case "install":
|
|
133
|
+
case "i":
|
|
134
|
+
install();
|
|
135
|
+
break;
|
|
136
|
+
case "help":
|
|
137
|
+
case "--help":
|
|
138
|
+
case "-h":
|
|
139
139
|
case undefined:
|
|
140
|
-
printUsage()
|
|
141
|
-
break
|
|
140
|
+
printUsage();
|
|
141
|
+
break;
|
|
142
142
|
default:
|
|
143
|
-
console.error(`Unknown command: ${command}`)
|
|
144
|
-
printUsage()
|
|
145
|
-
process.exit(1)
|
|
143
|
+
console.error(`Unknown command: ${command}`);
|
|
144
|
+
printUsage();
|
|
145
|
+
process.exit(1);
|
|
146
146
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compat-shims-CO9JXXV4.cjs","sources":["../src/compat-shims.ts"],"sourcesContent":null,"names":["snapshotChanged","inst","createUseSyncExternalStoreShim","R","subscribe","getSnapshot","value","forceUpdate","createUseIdShim","counter","ref","createShims","cb"],"mappings":"aAmBA,SAASA,EAAmBC,EAAmD,CAC7E,GAAI,CACF,MAAO,CAAC,OAAO,GAAGA,EAAK,MAAOA,EAAK,aAAa,CAClD,MAAQ,CACN,MAAO,EACT,CACF,CAEA,SAASC,EAA+BC,EAAc,CACpD,OAAO,SACLC,EACAC,EACG,CACH,MAAMC,EAAQD,EAAA,EACR,CAAC,CAAE,KAAAJ,
|
|
1
|
+
{"version":3,"file":"compat-shims-CO9JXXV4.cjs","sources":["../src/compat-shims.ts"],"sourcesContent":null,"names":["snapshotChanged","inst","createUseSyncExternalStoreShim","R","subscribe","getSnapshot","value","forceUpdate","createUseIdShim","counter","ref","createShims","cb"],"mappings":"aAmBA,SAASA,EAAmBC,EAAmD,CAC7E,GAAI,CACF,MAAO,CAAC,OAAO,GAAGA,EAAK,MAAOA,EAAK,aAAa,CAClD,MAAQ,CACN,MAAO,EACT,CACF,CAEA,SAASC,EAA+BC,EAAc,CACpD,OAAO,SACLC,EACAC,EACG,CACH,MAAMC,EAAQD,EAAA,EACR,CAAC,CAAE,KAAAJ,CAAA,EAAQM,CAAW,EAAIJ,EAAE,SAAS,CACzC,KAAM,CAAE,MAAAG,EAAO,YAAAD,CAAA,CAAY,CAC5B,EAED,OAAAF,EAAE,gBAAgB,IAAM,CACtBF,EAAK,MAAQK,EACbL,EAAK,YAAcI,EACfL,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,CACjD,EAAG,CAACG,EAAWE,EAAOD,CAAW,CAAC,EAElCF,EAAE,UAAU,KACNH,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,EACxCG,EAAU,IAAM,CACjBJ,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,CACjD,CAAC,GACA,CAACG,CAAS,CAAC,EAEPE,CACT,CACF,CAEA,SAASE,EAAgBL,EAAc,CACrC,IAAIM,EAAU,EACd,OAAO,UAAyB,CAC9B,MAAMC,EAAMP,EAAE,OAAsB,IAAI,EACxC,OAAIO,EAAI,UAAY,OAAMA,EAAI,QAAU,KAAKD,GAAS,KAC/CC,EAAI,OACb,CACF,CAGO,SAASC,EAAYR,EAAc,CACxC,MAAO,CACL,qBACEA,EAAE,sBAAwBD,EAA+BC,CAAC,EAC5D,MAAOA,EAAE,OAASK,EAAgBL,CAAC,EACnC,mBAAoBA,EAAE,oBAAsBA,EAAE,gBAC9C,gBAAiBA,EAAE,kBAAqBS,GAAmBA,EAAA,GAC3D,cACET,EAAE,gBACD,IAA2C,CAAC,GAAQS,GAAOA,EAAA,CAAI,GAClE,iBAAkBT,EAAE,mBAAyBG,GAAgBA,EAAA,CAEjE"}
|
|
@@ -7,7 +7,9 @@ function a(e) {
|
|
|
7
7
|
}
|
|
8
8
|
function f(e) {
|
|
9
9
|
return function(u, n) {
|
|
10
|
-
const s = n(), [{ inst: r }, c] = e.useState({
|
|
10
|
+
const s = n(), [{ inst: r }, c] = e.useState({
|
|
11
|
+
inst: { value: s, getSnapshot: n }
|
|
12
|
+
});
|
|
11
13
|
return e.useLayoutEffect(() => {
|
|
12
14
|
r.value = s, r.getSnapshot = n, a(r) && c({ inst: r });
|
|
13
15
|
}, [u, s, n]), e.useEffect(() => (a(r) && c({ inst: r }), u(() => {
|
|
@@ -35,4 +37,4 @@ function i(e) {
|
|
|
35
37
|
export {
|
|
36
38
|
i as c
|
|
37
39
|
};
|
|
38
|
-
//# sourceMappingURL=compat-shims-
|
|
40
|
+
//# sourceMappingURL=compat-shims-DxtUrORi.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"compat-shims-DxtUrORi.js","sources":["../src/compat-shims.ts"],"sourcesContent":null,"names":["snapshotChanged","inst","createUseSyncExternalStoreShim","R","subscribe","getSnapshot","value","forceUpdate","createUseIdShim","counter","ref","createShims","cb"],"mappings":"AAmBA,SAASA,EAAmBC,GAAmD;AAC7E,MAAI;AACF,WAAO,CAAC,OAAO,GAAGA,EAAK,OAAOA,EAAK,aAAa;AAAA,EAClD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAASC,EAA+BC,GAAc;AACpD,SAAO,SACLC,GACAC,GACG;AACH,UAAMC,IAAQD,EAAA,GACR,CAAC,EAAE,MAAAJ,EAAA,GAAQM,CAAW,IAAIJ,EAAE,SAAS;AAAA,MACzC,MAAM,EAAE,OAAAG,GAAO,aAAAD,EAAA;AAAA,IAAY,CAC5B;AAED,WAAAF,EAAE,gBAAgB,MAAM;AACtB,MAAAF,EAAK,QAAQK,GACbL,EAAK,cAAcI,GACfL,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM;AAAA,IACjD,GAAG,CAACG,GAAWE,GAAOD,CAAW,CAAC,GAElCF,EAAE,UAAU,OACNH,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM,GACxCG,EAAU,MAAM;AACrB,MAAIJ,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM;AAAA,IACjD,CAAC,IACA,CAACG,CAAS,CAAC,GAEPE;AAAA,EACT;AACF;AAEA,SAASE,EAAgBL,GAAc;AACrC,MAAIM,IAAU;AACd,SAAO,WAAyB;AAC9B,UAAMC,IAAMP,EAAE,OAAsB,IAAI;AACxC,WAAIO,EAAI,YAAY,SAAMA,EAAI,UAAU,KAAKD,GAAS,MAC/CC,EAAI;AAAA,EACb;AACF;AAGO,SAASC,EAAYR,GAAc;AACxC,SAAO;AAAA,IACL,sBACEA,EAAE,wBAAwBD,EAA+BC,CAAC;AAAA,IAC5D,OAAOA,EAAE,SAASK,EAAgBL,CAAC;AAAA,IACnC,oBAAoBA,EAAE,sBAAsBA,EAAE;AAAA,IAC9C,iBAAiBA,EAAE,oBAAoB,CAACS,MAAmBA,EAAA;AAAA,IAC3D,eACET,EAAE,kBACD,MAA2C,CAAC,IAAO,CAACS,MAAOA,EAAA,CAAI;AAAA,IAClE,kBAAkBT,EAAE,qBAAqB,CAAIG,MAAgBA;AAAA,EAAA;AAEjE;"}
|
|
@@ -18,12 +18,12 @@ export interface ShareButtonProps {
|
|
|
18
18
|
* Button variant
|
|
19
19
|
* @default "ghost"
|
|
20
20
|
*/
|
|
21
|
-
variant?:
|
|
21
|
+
variant?: "ghost" | "outline" | "default";
|
|
22
22
|
/**
|
|
23
23
|
* Button size
|
|
24
24
|
* @default "sm"
|
|
25
25
|
*/
|
|
26
|
-
size?:
|
|
26
|
+
size?: "sm" | "default" | "lg" | "icon";
|
|
27
27
|
/**
|
|
28
28
|
* Additional CSS classes
|
|
29
29
|
*/
|
|
@@ -2,8 +2,8 @@ import { ComponentPropsWithRef } from 'react';
|
|
|
2
2
|
import { Button } from '../ui/button';
|
|
3
3
|
type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
|
|
4
4
|
tooltip: string;
|
|
5
|
-
side?:
|
|
6
|
-
align?:
|
|
5
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
6
|
+
align?: "start" | "center" | "end";
|
|
7
7
|
};
|
|
8
8
|
export declare const TooltipIconButton: import('react').ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
9
9
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as AvatarPrimitive from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
3
3
|
declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import * as React from
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
|
|
4
4
|
variant?: "default" | "link" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
|
|
5
5
|
size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
|
|
@@ -10,7 +10,7 @@ export interface CalendarProps {
|
|
|
10
10
|
end: Date | null;
|
|
11
11
|
}) => void;
|
|
12
12
|
/** Whether range selection is enabled */
|
|
13
|
-
mode?:
|
|
13
|
+
mode?: "single" | "range";
|
|
14
14
|
/** Disable dates before this */
|
|
15
15
|
minDate?: Date;
|
|
16
16
|
/** Disable dates after this */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as CollapsiblePrimitive from
|
|
1
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
2
2
|
declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as DialogPrimitive from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
3
|
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function DialogPortal({ container, ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,8 +8,8 @@ declare function DialogOverlay({ className, ...props }: React.ComponentProps<typ
|
|
|
8
8
|
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
9
|
showCloseButton?: boolean;
|
|
10
10
|
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare function DialogHeader({ className, ...props }: React.ComponentProps<
|
|
12
|
-
declare function DialogFooter({ className, ...props }: React.ComponentProps<
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as PopoverPrimitive from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3
3
|
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare function PopoverContent({ className, align, sideOffset, container, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare function Skeleton({ className, ...props }: React.ComponentProps<
|
|
1
|
+
declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
2
2
|
export { Skeleton };
|
|
@@ -2,7 +2,7 @@ export interface TimeRange {
|
|
|
2
2
|
from: Date;
|
|
3
3
|
to: Date;
|
|
4
4
|
}
|
|
5
|
-
export type DateRangePreset =
|
|
5
|
+
export type DateRangePreset = "15m" | "1h" | "4h" | "1d" | "2d" | "3d" | "7d" | "15d" | "30d" | "90d";
|
|
6
6
|
export interface TimeRangePreset {
|
|
7
7
|
label: string;
|
|
8
8
|
shortLabel: string;
|