sunpeak 0.1.25 → 0.2.2
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 +9 -76
- package/bin/sunpeak.js +87 -0
- package/dist/index.cjs +827 -1361
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +98 -589
- package/dist/index.d.ts +98 -589
- package/dist/index.js +795 -1337
- package/dist/index.js.map +1 -1
- package/dist/styles/chatgpt/index.css +146 -0
- package/dist/styles/globals.css +220 -0
- package/package.json +34 -36
- package/template/.prettierignore +4 -0
- package/template/.prettierrc +9 -0
- package/template/README.md +47 -0
- package/template/assets/favicon.ico +0 -0
- package/template/components.json +21 -0
- package/template/dev/main.tsx +65 -0
- package/template/dev/styles.css +5 -0
- package/template/eslint.config.cjs +49 -0
- package/template/index.html +13 -0
- package/template/package.json +56 -0
- package/template/src/App.tsx +45 -0
- package/template/src/components/index.ts +2 -0
- package/template/src/components/shadcn/button.tsx +60 -0
- package/template/src/components/shadcn/card.tsx +76 -0
- package/template/src/components/shadcn/carousel.tsx +260 -0
- package/template/src/components/shadcn/index.ts +5 -0
- package/template/src/components/shadcn/label.tsx +24 -0
- package/template/src/components/shadcn/select.tsx +157 -0
- package/template/src/components/sunpeak-card.test.tsx +76 -0
- package/template/src/components/sunpeak-card.tsx +140 -0
- package/template/src/components/sunpeak-carousel.test.tsx +42 -0
- package/template/src/components/sunpeak-carousel.tsx +126 -0
- package/template/src/index.ts +3 -0
- package/template/src/lib/index.ts +1 -0
- package/template/src/lib/utils.ts +6 -0
- package/template/src/styles/chatgpt.css +146 -0
- package/template/src/styles/globals.css +220 -0
- package/template/src/test/setup.ts +37 -0
- package/template/tsconfig.json +32 -0
- package/template/tsconfig.node.json +11 -0
- package/template/tsup.config.ts +23 -0
- package/template/vite.config.ts +35 -0
- package/template/vitest.config.ts +15 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,253 +1,19 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* @default 800
|
|
11
|
-
*/
|
|
12
|
-
maxWidth?: number;
|
|
13
|
-
/**
|
|
14
|
-
* Override the color scheme detection
|
|
15
|
-
* If not provided, uses window.openai.colorScheme
|
|
16
|
-
*/
|
|
17
|
-
mode?: 'light' | 'dark';
|
|
18
|
-
/**
|
|
19
|
-
* Whether to inject MUI's CssBaseline component
|
|
20
|
-
* @default true
|
|
21
|
-
*/
|
|
22
|
-
enableCssBaseline?: boolean;
|
|
23
|
-
}
|
|
24
|
-
interface GenAIRenderProps {
|
|
25
|
-
/**
|
|
26
|
-
* Maximum height from platform (in pixels)
|
|
27
|
-
*/
|
|
28
|
-
maxHeight: number | null;
|
|
29
|
-
/**
|
|
30
|
-
* Color scheme from platform
|
|
31
|
-
*/
|
|
32
|
-
colorScheme: 'light' | 'dark' | null;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* GenAI - Create platform-aware genAI Apps with automatic theming and constraints.
|
|
36
|
-
*
|
|
37
|
-
* This is the single interface for building genAI Apps. It automatically provides:
|
|
38
|
-
* - MUI theming (light/dark mode from platform)
|
|
39
|
-
* - Platform constraints (maxHeight)
|
|
40
|
-
* - Color scheme information
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```tsx
|
|
44
|
-
* export const MyApp = GenAI(({ maxHeight, colorScheme }) => (
|
|
45
|
-
* <div>
|
|
46
|
-
* <h2>My App</h2>
|
|
47
|
-
* <p>Theme: {colorScheme}</p>
|
|
48
|
-
* <p>Max height: {maxHeight}px</p>
|
|
49
|
-
* </div>
|
|
50
|
-
* ));
|
|
51
|
-
* ```
|
|
52
|
-
*/
|
|
53
|
-
declare function GenAI(renderFn: (props: GenAIRenderProps) => ReactNode): {
|
|
54
|
-
(props?: GenAIProps): react_jsx_runtime.JSX.Element;
|
|
55
|
-
displayName: string;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
interface ButtonProps extends Omit<ButtonProps$1, 'onClick'> {
|
|
59
|
-
/**
|
|
60
|
-
* Whether to use primary styling (accent color) or secondary (outlined)
|
|
61
|
-
*/
|
|
62
|
-
isPrimary?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* Click handler (required)
|
|
65
|
-
*/
|
|
66
|
-
onClick: () => void;
|
|
67
|
-
}
|
|
68
|
-
interface CardProps extends Omit<GenAIProps, 'children'>, HTMLAttributes<HTMLDivElement> {
|
|
69
|
-
/**
|
|
70
|
-
* Card content
|
|
71
|
-
*/
|
|
72
|
-
children?: ReactNode;
|
|
73
|
-
/**
|
|
74
|
-
* Image to display at the top of the card
|
|
75
|
-
*/
|
|
76
|
-
image: string;
|
|
77
|
-
/**
|
|
78
|
-
* Alt text for the image
|
|
79
|
-
*/
|
|
80
|
-
imageAlt: string;
|
|
81
|
-
/**
|
|
82
|
-
* Maximum width for the image in pixels
|
|
83
|
-
*/
|
|
84
|
-
imageMaxWidth: number;
|
|
85
|
-
/**
|
|
86
|
-
* Maximum height for the image in pixels
|
|
87
|
-
*/
|
|
88
|
-
imageMaxHeight: number;
|
|
89
|
-
/**
|
|
90
|
-
* Optional header text (title)
|
|
91
|
-
*/
|
|
92
|
-
header?: ReactNode;
|
|
93
|
-
/**
|
|
94
|
-
* Optional metadata text (e.g., rating, category)
|
|
95
|
-
*/
|
|
96
|
-
metadata?: ReactNode;
|
|
97
|
-
/**
|
|
98
|
-
* First action button (0-1)
|
|
99
|
-
*/
|
|
100
|
-
button1?: ButtonProps;
|
|
101
|
-
/**
|
|
102
|
-
* Second action button (0-1)
|
|
103
|
-
*/
|
|
104
|
-
button2?: ButtonProps;
|
|
105
|
-
/**
|
|
106
|
-
* Card variant
|
|
107
|
-
*/
|
|
108
|
-
variant?: 'default' | 'bordered' | 'elevated';
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* Card - A responsive card component that adapts to display mode.
|
|
112
|
-
*
|
|
113
|
-
* In inline mode:
|
|
114
|
-
* - Fixed width for carousel consistency
|
|
115
|
-
* - Compact layout optimized for horizontal scrolling
|
|
116
|
-
* - Clickable to request fullscreen mode
|
|
117
|
-
*
|
|
118
|
-
* In fullscreen mode:
|
|
119
|
-
* - Full width layout
|
|
120
|
-
* - Expanded content display
|
|
121
|
-
* - More breathing room for content
|
|
122
|
-
*
|
|
123
|
-
* Design specs:
|
|
124
|
-
* - Image: aspect-square with 24px border radius
|
|
125
|
-
* - Typography: 16px medium for header, 12px for metadata, 14px for description
|
|
126
|
-
* - Spacing: 12px between sections
|
|
127
|
-
* - Max 2 actions in footer (design guideline)
|
|
128
|
-
*/
|
|
129
|
-
declare const Card: ({ children, image, imageAlt, imageMaxWidth, imageMaxHeight, header, metadata, button1, button2, variant, className, onClick, id, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
|
|
130
|
-
|
|
131
|
-
interface CarouselProps extends Omit<GenAIProps, 'children'>, HTMLAttributes<HTMLDivElement> {
|
|
132
|
-
/**
|
|
133
|
-
* Carousel items (typically Card components)
|
|
134
|
-
*/
|
|
135
|
-
children: ReactNode;
|
|
136
|
-
/**
|
|
137
|
-
* Gap between items in pixels
|
|
138
|
-
* @default 16
|
|
139
|
-
*/
|
|
140
|
-
gap?: number;
|
|
141
|
-
/**
|
|
142
|
-
* Show navigation arrows
|
|
143
|
-
* @default true
|
|
144
|
-
*/
|
|
145
|
-
showArrows?: boolean;
|
|
146
|
-
/**
|
|
147
|
-
* Show edge gradients to indicate more content
|
|
148
|
-
* @default true
|
|
149
|
-
*/
|
|
150
|
-
showEdgeGradients?: boolean;
|
|
151
|
-
/**
|
|
152
|
-
* Card width configuration. Can be a single number or an object specifying inline and fullscreen widths.
|
|
153
|
-
* @default { inline: 220, fullscreen: 340 }
|
|
154
|
-
*/
|
|
155
|
-
cardWidth?: number | {
|
|
156
|
-
inline?: number;
|
|
157
|
-
fullscreen?: number;
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Carousel - MUI-based carousel for displaying cards side-by-side.
|
|
162
|
-
* Follows OpenAI ChatGPT Apps SDK design guidelines.
|
|
163
|
-
*/
|
|
164
|
-
declare const Carousel: ({ children, gap, maxWidth, showArrows, showEdgeGradients, cardWidth: cardWidthProp, className, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;
|
|
165
|
-
|
|
166
|
-
type UnknownObject$1 = Record<string, unknown>;
|
|
167
|
-
type Theme$1 = 'light' | 'dark';
|
|
168
|
-
type SafeAreaInsets$1 = {
|
|
169
|
-
top: number;
|
|
170
|
-
bottom: number;
|
|
171
|
-
left: number;
|
|
172
|
-
right: number;
|
|
173
|
-
};
|
|
174
|
-
type SafeArea$1 = {
|
|
175
|
-
insets: SafeAreaInsets$1;
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ClassValue } from 'clsx';
|
|
4
|
+
|
|
5
|
+
type Theme$1 = "light" | "dark";
|
|
6
|
+
type ThemeProviderProps = {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
defaultTheme?: Theme$1;
|
|
9
|
+
theme?: Theme$1;
|
|
176
10
|
};
|
|
177
|
-
type
|
|
178
|
-
|
|
179
|
-
device: {
|
|
180
|
-
type: DeviceType$1;
|
|
181
|
-
};
|
|
182
|
-
capabilities: {
|
|
183
|
-
hover: boolean;
|
|
184
|
-
touch: boolean;
|
|
185
|
-
};
|
|
11
|
+
type ThemeProviderState = {
|
|
12
|
+
theme: Theme$1;
|
|
186
13
|
};
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
type RequestDisplayMode$1 = (args: {
|
|
190
|
-
mode: DisplayMode$1;
|
|
191
|
-
}) => Promise<{
|
|
192
|
-
/**
|
|
193
|
-
* The granted display mode. The host may reject the request.
|
|
194
|
-
* For mobile, PiP is always coerced to fullscreen.
|
|
195
|
-
*/
|
|
196
|
-
mode: DisplayMode$1;
|
|
197
|
-
}>;
|
|
198
|
-
type CallToolResponse$1 = {
|
|
199
|
-
result: string;
|
|
200
|
-
};
|
|
201
|
-
/** Calling APIs */
|
|
202
|
-
type CallTool$1 = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse$1>;
|
|
203
|
-
type ChatGPTGlobals<ToolInput = UnknownObject$1, ToolOutput = UnknownObject$1, ToolResponseMetadata = UnknownObject$1, WidgetState = UnknownObject$1> = {
|
|
204
|
-
colorScheme: Theme$1;
|
|
205
|
-
userAgent: UserAgent$1;
|
|
206
|
-
locale: string;
|
|
207
|
-
maxHeight: number;
|
|
208
|
-
displayMode: DisplayMode$1;
|
|
209
|
-
safeArea: SafeArea$1;
|
|
210
|
-
toolInput: ToolInput;
|
|
211
|
-
toolOutput: ToolOutput | null;
|
|
212
|
-
toolResponseMetadata: ToolResponseMetadata | null;
|
|
213
|
-
widgetState: WidgetState | null;
|
|
214
|
-
setWidgetState: (state: WidgetState) => Promise<void>;
|
|
215
|
-
};
|
|
216
|
-
type API = {
|
|
217
|
-
callTool: CallTool$1;
|
|
218
|
-
sendFollowUpMessage: (args: {
|
|
219
|
-
prompt: string;
|
|
220
|
-
}) => Promise<void>;
|
|
221
|
-
openExternal(payload: {
|
|
222
|
-
href: string;
|
|
223
|
-
}): void;
|
|
224
|
-
requestDisplayMode: RequestDisplayMode$1;
|
|
225
|
-
};
|
|
226
|
-
/** Extra events */
|
|
227
|
-
declare const SET_GLOBALS_EVENT_TYPE = "chatgpt:set_globals";
|
|
228
|
-
declare class SetGlobalsEvent extends CustomEvent<{
|
|
229
|
-
globals: Partial<ChatGPTGlobals>;
|
|
230
|
-
}> {
|
|
231
|
-
readonly type = "chatgpt:set_globals";
|
|
232
|
-
}
|
|
233
|
-
/**
|
|
234
|
-
* Global openai object injected by the web sandbox for communicating with ChatGPT host page.
|
|
235
|
-
*/
|
|
236
|
-
declare global {
|
|
237
|
-
interface Window {
|
|
238
|
-
openai?: API & ChatGPTGlobals;
|
|
239
|
-
}
|
|
240
|
-
interface WindowEventMap {
|
|
241
|
-
[SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
14
|
+
declare function ThemeProvider({ children, defaultTheme, theme: controlledTheme, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare const useThemeContext: () => ThemeProviderState;
|
|
244
16
|
|
|
245
|
-
/**
|
|
246
|
-
* Platform-agnostic types for genAI App SDKs
|
|
247
|
-
*
|
|
248
|
-
* These types define a common interface that can be implemented
|
|
249
|
-
* by different platforms (ChatGPT, Gemini, Claude, etc.)
|
|
250
|
-
*/
|
|
251
17
|
type UnknownObject = Record<string, unknown>;
|
|
252
18
|
type Theme = 'light' | 'dark';
|
|
253
19
|
type SafeAreaInsets = {
|
|
@@ -269,7 +35,6 @@ type UserAgent = {
|
|
|
269
35
|
touch: boolean;
|
|
270
36
|
};
|
|
271
37
|
};
|
|
272
|
-
/** Display mode for the app */
|
|
273
38
|
type DisplayMode = 'pip' | 'inline' | 'fullscreen';
|
|
274
39
|
type RequestDisplayMode = (args: {
|
|
275
40
|
mode: DisplayMode;
|
|
@@ -280,13 +45,8 @@ type CallToolResponse = {
|
|
|
280
45
|
result: string;
|
|
281
46
|
};
|
|
282
47
|
type CallTool = (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
*
|
|
286
|
-
* All genAI platforms should implement this interface to work with Sunpeak components.
|
|
287
|
-
*/
|
|
288
|
-
type PlatformGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
|
|
289
|
-
colorScheme: Theme;
|
|
48
|
+
type OpenAiGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, ToolResponseMetadata = UnknownObject, WidgetState = UnknownObject> = {
|
|
49
|
+
theme: Theme;
|
|
290
50
|
userAgent: UserAgent;
|
|
291
51
|
locale: string;
|
|
292
52
|
maxHeight: number;
|
|
@@ -298,10 +58,7 @@ type PlatformGlobals<ToolInput = UnknownObject, ToolOutput = UnknownObject, Tool
|
|
|
298
58
|
widgetState: WidgetState | null;
|
|
299
59
|
setWidgetState: (state: WidgetState) => Promise<void>;
|
|
300
60
|
};
|
|
301
|
-
|
|
302
|
-
* Platform API methods
|
|
303
|
-
*/
|
|
304
|
-
type PlatformAPI = {
|
|
61
|
+
type OpenAiAPI = {
|
|
305
62
|
callTool: CallTool;
|
|
306
63
|
sendFollowUpMessage: (args: {
|
|
307
64
|
prompt: string;
|
|
@@ -311,347 +68,99 @@ type PlatformAPI = {
|
|
|
311
68
|
}): void;
|
|
312
69
|
requestDisplayMode: RequestDisplayMode;
|
|
313
70
|
};
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
interface PlatformAdapter {
|
|
320
|
-
/**
|
|
321
|
-
* Platform identifier (e.g., 'chatgpt', 'gemini', 'claude')
|
|
322
|
-
*/
|
|
323
|
-
readonly name: string;
|
|
324
|
-
/**
|
|
325
|
-
* Check if this platform is available in the current environment
|
|
326
|
-
*/
|
|
327
|
-
isAvailable(): boolean;
|
|
328
|
-
/**
|
|
329
|
-
* Get a specific global value
|
|
330
|
-
*/
|
|
331
|
-
getGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
|
|
332
|
-
/**
|
|
333
|
-
* Get all platform globals
|
|
334
|
-
*/
|
|
335
|
-
getGlobals(): (PlatformAPI & PlatformGlobals) | null;
|
|
336
|
-
/**
|
|
337
|
-
* Subscribe to changes in platform globals
|
|
338
|
-
* Returns an unsubscribe function
|
|
339
|
-
*/
|
|
340
|
-
subscribe(callback: () => void): () => void;
|
|
341
|
-
}
|
|
342
|
-
/**
|
|
343
|
-
* Platform registry to track supported platforms
|
|
344
|
-
*/
|
|
345
|
-
type PlatformType = 'chatgpt' | 'gemini' | 'claude' | 'custom';
|
|
346
|
-
|
|
347
|
-
interface ChatGPTSimulatorProps {
|
|
348
|
-
/**
|
|
349
|
-
* The component to render in the ChatGPT message
|
|
350
|
-
* Can be a function that receives the selected App UI
|
|
351
|
-
*/
|
|
352
|
-
children: ReactNode | ((uiSimulation: string) => ReactNode);
|
|
353
|
-
/**
|
|
354
|
-
* Initial display mode
|
|
355
|
-
*/
|
|
356
|
-
displayMode?: DisplayMode$1;
|
|
357
|
-
/**
|
|
358
|
-
* Initial color scheme
|
|
359
|
-
*/
|
|
360
|
-
colorScheme?: Theme$1;
|
|
361
|
-
/**
|
|
362
|
-
* Initial tool input
|
|
363
|
-
*/
|
|
364
|
-
toolInput?: Record<string, unknown>;
|
|
365
|
-
/**
|
|
366
|
-
* Initial tool output
|
|
367
|
-
*/
|
|
368
|
-
toolOutput?: Record<string, unknown> | null;
|
|
369
|
-
/**
|
|
370
|
-
* Initial widget state
|
|
371
|
-
*/
|
|
372
|
-
widgetState?: Record<string, unknown> | null;
|
|
373
|
-
/**
|
|
374
|
-
* User message to display above the component
|
|
375
|
-
*/
|
|
376
|
-
userMessage?: string;
|
|
377
|
-
/**
|
|
378
|
-
* Show simulator controls
|
|
379
|
-
*/
|
|
380
|
-
showControls?: boolean;
|
|
381
|
-
/**
|
|
382
|
-
* App UIs for the App UI selector
|
|
383
|
-
*/
|
|
384
|
-
uiSimulations?: string[];
|
|
385
|
-
/**
|
|
386
|
-
* Initial App UI
|
|
387
|
-
*/
|
|
388
|
-
initialUISimulation?: string;
|
|
389
|
-
}
|
|
390
|
-
/**
|
|
391
|
-
* ChatGPT Simulator Component
|
|
392
|
-
*
|
|
393
|
-
* Emulates the ChatGPT environment for testing components locally.
|
|
394
|
-
* Provides window.openai API and renders components in a ChatGPT-like UI.
|
|
395
|
-
*/
|
|
396
|
-
declare function ChatGPTSimulator({ children, displayMode: initialDisplayMode, colorScheme: initialColorScheme, toolInput, toolOutput, widgetState: initialWidgetState, userMessage, showControls, uiSimulations, initialUISimulation, }: ChatGPTSimulatorProps): react_jsx_runtime.JSX.Element;
|
|
397
|
-
|
|
398
|
-
interface PlatformProviderProps {
|
|
399
|
-
/**
|
|
400
|
-
* The platform adapter to use. If not provided, will auto-detect.
|
|
401
|
-
*/
|
|
402
|
-
adapter?: PlatformAdapter;
|
|
403
|
-
/**
|
|
404
|
-
* Platform name to use (e.g., 'chatgpt', 'gemini'). If not provided, will auto-detect.
|
|
405
|
-
*/
|
|
406
|
-
platform?: string;
|
|
407
|
-
children: ReactNode;
|
|
408
|
-
}
|
|
409
|
-
/**
|
|
410
|
-
* Platform Provider
|
|
411
|
-
*
|
|
412
|
-
* Wrap your app with this provider to specify which genAI platform to use.
|
|
413
|
-
* If no platform is specified, it will auto-detect the available platform.
|
|
414
|
-
*
|
|
415
|
-
* @example
|
|
416
|
-
* ```tsx
|
|
417
|
-
* import { PlatformProvider } from 'sunpeak';
|
|
418
|
-
*
|
|
419
|
-
* // Auto-detect platform
|
|
420
|
-
* <PlatformProvider>
|
|
421
|
-
* <App />
|
|
422
|
-
* </PlatformProvider>
|
|
423
|
-
*
|
|
424
|
-
* // Explicitly use ChatGPT
|
|
425
|
-
* <PlatformProvider platform="chatgpt">
|
|
426
|
-
* <App />
|
|
427
|
-
* </PlatformProvider>
|
|
428
|
-
* ```
|
|
429
|
-
*/
|
|
430
|
-
declare function PlatformProvider({ adapter, platform, children }: PlatformProviderProps): react_jsx_runtime.JSX.Element;
|
|
431
|
-
/**
|
|
432
|
-
* Hook to access the current platform adapter
|
|
433
|
-
*
|
|
434
|
-
* Returns null if no platform is available or detected.
|
|
435
|
-
*/
|
|
436
|
-
declare function usePlatform(): PlatformAdapter | null;
|
|
437
|
-
|
|
438
|
-
declare class ChatGPTPlatformAdapter implements PlatformAdapter {
|
|
439
|
-
readonly name = "chatgpt";
|
|
440
|
-
isAvailable(): boolean;
|
|
441
|
-
getGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
|
|
442
|
-
getGlobals(): ({
|
|
443
|
-
callTool: CallTool$1;
|
|
444
|
-
sendFollowUpMessage: (args: {
|
|
445
|
-
prompt: string;
|
|
446
|
-
}) => Promise<void>;
|
|
447
|
-
openExternal(payload: {
|
|
448
|
-
href: string;
|
|
449
|
-
}): void;
|
|
450
|
-
requestDisplayMode: RequestDisplayMode$1;
|
|
451
|
-
} & ChatGPTGlobals<UnknownObject$1, UnknownObject$1, UnknownObject$1, UnknownObject$1>) | null;
|
|
452
|
-
subscribe(callback: () => void): () => void;
|
|
71
|
+
declare const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
|
|
72
|
+
declare class SetGlobalsEvent extends CustomEvent<{
|
|
73
|
+
globals: Partial<OpenAiGlobals>;
|
|
74
|
+
}> {
|
|
75
|
+
readonly type = "openai:set_globals";
|
|
453
76
|
}
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
*
|
|
462
|
-
* Manages multiple platform adapters and auto-detects the active platform.
|
|
463
|
-
*/
|
|
464
|
-
|
|
465
|
-
interface PlatformRegistry {
|
|
466
|
-
/**
|
|
467
|
-
* Register a platform adapter
|
|
468
|
-
*/
|
|
469
|
-
register(adapter: PlatformAdapter): void;
|
|
470
|
-
/**
|
|
471
|
-
* Get a specific platform adapter by name
|
|
472
|
-
*/
|
|
473
|
-
get(name: string): PlatformAdapter | null;
|
|
474
|
-
/**
|
|
475
|
-
* Auto-detect and return the active platform
|
|
476
|
-
* Returns the first available platform in the registry
|
|
477
|
-
*/
|
|
478
|
-
detect(): PlatformAdapter | null;
|
|
479
|
-
/**
|
|
480
|
-
* Get all registered platforms
|
|
481
|
-
*/
|
|
482
|
-
getAll(): PlatformAdapter[];
|
|
77
|
+
declare global {
|
|
78
|
+
interface Window {
|
|
79
|
+
openai: OpenAiAPI & OpenAiGlobals;
|
|
80
|
+
}
|
|
81
|
+
interface WindowEventMap {
|
|
82
|
+
[SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
|
|
83
|
+
}
|
|
483
84
|
}
|
|
484
|
-
/**
|
|
485
|
-
* Create a new platform registry
|
|
486
|
-
*/
|
|
487
|
-
declare function createPlatformRegistry(): PlatformRegistry;
|
|
488
85
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
* @returns The value of the global state, or null if not available
|
|
497
|
-
*
|
|
498
|
-
* @example
|
|
499
|
-
* ```tsx
|
|
500
|
-
* function MyWidget() {
|
|
501
|
-
* const colorScheme = usePlatformGlobal('colorScheme');
|
|
502
|
-
* const displayMode = usePlatformGlobal('displayMode');
|
|
503
|
-
*
|
|
504
|
-
* return <div className={colorScheme === 'dark' ? 'dark' : 'light'}>...</div>;
|
|
505
|
-
* }
|
|
506
|
-
* ```
|
|
507
|
-
*/
|
|
508
|
-
declare function usePlatformGlobal<K extends keyof PlatformGlobals>(key: K): PlatformGlobals[K] | null;
|
|
86
|
+
type ScreenWidth = 'mobile-s' | 'mobile-l' | 'tablet' | 'full';
|
|
87
|
+
type SimulatorConfig = {
|
|
88
|
+
theme: Theme;
|
|
89
|
+
displayMode: DisplayMode;
|
|
90
|
+
screenWidth: ScreenWidth;
|
|
91
|
+
};
|
|
92
|
+
declare const SCREEN_WIDTHS: Record<ScreenWidth, number>;
|
|
509
93
|
|
|
510
|
-
|
|
511
|
-
* Hook to get the current display mode from the active genAI platform.
|
|
512
|
-
* Display modes include: 'inline', 'fullscreen', and 'pip' (picture-in-picture).
|
|
513
|
-
*
|
|
514
|
-
* Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
|
|
515
|
-
*
|
|
516
|
-
* @returns The current display mode, or null if not in a supported environment
|
|
517
|
-
*/
|
|
518
|
-
declare const useDisplayMode: () => DisplayMode$1 | null;
|
|
94
|
+
declare const useDisplayMode: () => DisplayMode | null;
|
|
519
95
|
|
|
520
|
-
/**
|
|
521
|
-
* Hook to get the maximum height constraint from the active genAI platform.
|
|
522
|
-
* Useful for ensuring your widget doesn't exceed the available space.
|
|
523
|
-
*
|
|
524
|
-
* Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
|
|
525
|
-
*
|
|
526
|
-
* @returns The maximum height in pixels, or null if not available
|
|
527
|
-
*/
|
|
528
96
|
declare const useMaxHeight: () => number | null;
|
|
529
97
|
|
|
530
|
-
|
|
531
|
-
* Hook to request a specific display mode from the platform
|
|
532
|
-
*
|
|
533
|
-
* @example
|
|
534
|
-
* ```tsx
|
|
535
|
-
* const requestDisplayMode = useRequestDisplayMode();
|
|
536
|
-
*
|
|
537
|
-
* const handleClick = async () => {
|
|
538
|
-
* await requestDisplayMode({ mode: 'fullscreen' });
|
|
539
|
-
* };
|
|
540
|
-
* ```
|
|
541
|
-
*/
|
|
542
|
-
declare function useRequestDisplayMode(): RequestDisplayMode$1;
|
|
98
|
+
declare function useIsMobile(): boolean;
|
|
543
99
|
|
|
544
|
-
|
|
545
|
-
* Hook to get the current color scheme from the active genAI platform.
|
|
546
|
-
* Color scheme can be 'light' or 'dark'.
|
|
547
|
-
*
|
|
548
|
-
* Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
|
|
549
|
-
*
|
|
550
|
-
* @returns The current color scheme, or null if not in a supported environment
|
|
551
|
-
*/
|
|
552
|
-
declare const useColorScheme: () => Theme$1 | null;
|
|
100
|
+
declare function useOpenAiGlobal<K extends keyof OpenAiGlobals>(key: K): OpenAiGlobals[K] | null;
|
|
553
101
|
|
|
554
|
-
|
|
555
|
-
* Hook to get widget props (tool output) from the active genAI platform.
|
|
556
|
-
* This contains the data returned by your server's tool.
|
|
557
|
-
*
|
|
558
|
-
* Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
|
|
559
|
-
*
|
|
560
|
-
* @param defaultState - Default state to use if no props are available
|
|
561
|
-
* @returns The widget props from the tool output
|
|
562
|
-
*/
|
|
563
|
-
declare function useWidgetProps<T extends Record<string, unknown>>(defaultState?: T | (() => T)): T;
|
|
102
|
+
declare const useTheme: () => Theme | null;
|
|
564
103
|
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
* Works with any supported genAI platform (ChatGPT, Gemini, Claude, etc.)
|
|
570
|
-
*
|
|
571
|
-
* @param defaultState - Default state value or function to generate it
|
|
572
|
-
* @returns A tuple of [state, setState] similar to useState
|
|
573
|
-
*/
|
|
574
|
-
declare function useWidgetState<T extends UnknownObject$1>(defaultState: T | (() => T)): readonly [T, (state: SetStateAction<T>) => void];
|
|
575
|
-
declare function useWidgetState<T extends UnknownObject$1>(defaultState?: T | (() => T | null) | null): readonly [T | null, (state: SetStateAction<T | null>) => void];
|
|
104
|
+
declare function useWidgetState<T extends UnknownObject = UnknownObject>(): [
|
|
105
|
+
T | null,
|
|
106
|
+
(state: T) => Promise<void>
|
|
107
|
+
];
|
|
576
108
|
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
109
|
+
interface ChatGPTSimulatorProps {
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
appName?: string;
|
|
112
|
+
appIcon?: string;
|
|
113
|
+
userMessage?: string;
|
|
114
|
+
}
|
|
115
|
+
declare function ChatGPTSimulator({ children, appName, appIcon, userMessage }: ChatGPTSimulatorProps): react_jsx_runtime.JSX.Element;
|
|
116
|
+
|
|
117
|
+
declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
|
|
118
|
+
theme: Theme;
|
|
119
|
+
userAgent: {
|
|
120
|
+
device: {
|
|
121
|
+
type: "desktop";
|
|
122
|
+
};
|
|
123
|
+
capabilities: {
|
|
124
|
+
hover: boolean;
|
|
125
|
+
touch: boolean;
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
locale: string;
|
|
129
|
+
maxHeight: number;
|
|
130
|
+
displayMode: DisplayMode;
|
|
131
|
+
safeArea: {
|
|
132
|
+
insets: {
|
|
133
|
+
top: number;
|
|
134
|
+
bottom: number;
|
|
135
|
+
left: number;
|
|
136
|
+
right: number;
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
toolInput: {};
|
|
140
|
+
toolOutput: null;
|
|
141
|
+
toolResponseMetadata: null;
|
|
142
|
+
widgetState: Record<string, unknown> | null;
|
|
143
|
+
callTool(name: string, args: Record<string, unknown>): Promise<{
|
|
144
|
+
result: string;
|
|
145
|
+
}>;
|
|
146
|
+
sendFollowUpMessage(args: {
|
|
147
|
+
prompt: string;
|
|
148
|
+
}): Promise<void>;
|
|
149
|
+
openExternal(payload: {
|
|
150
|
+
href: string;
|
|
151
|
+
}): void;
|
|
152
|
+
requestDisplayMode(args: {
|
|
153
|
+
mode: DisplayMode;
|
|
154
|
+
}): Promise<{
|
|
155
|
+
mode: DisplayMode;
|
|
156
|
+
}>;
|
|
157
|
+
setWidgetState(state: Record<string, unknown>): Promise<void>;
|
|
158
|
+
setTheme(theme: Theme): void;
|
|
159
|
+
setDisplayMode(displayMode: DisplayMode): void;
|
|
160
|
+
private emitUpdate;
|
|
161
|
+
}
|
|
162
|
+
declare function initMockOpenAI(): MockOpenAI;
|
|
625
163
|
|
|
626
|
-
|
|
627
|
-
* Platform identifier type
|
|
628
|
-
*/
|
|
629
|
-
type Platform = 'chatgpt';
|
|
630
|
-
/**
|
|
631
|
-
* Get the current platform
|
|
632
|
-
* Currently only supports 'chatgpt'
|
|
633
|
-
* Future: Can be extended to support multiple platforms via build-time configuration
|
|
634
|
-
*/
|
|
635
|
-
declare const getCurrentPlatform: () => Platform;
|
|
636
|
-
/**
|
|
637
|
-
* Theme getter function type
|
|
638
|
-
*/
|
|
639
|
-
type ThemeGetter = (mode: 'light' | 'dark') => Theme$2;
|
|
640
|
-
/**
|
|
641
|
-
* Get theme for current platform
|
|
642
|
-
* This is the main function used by components
|
|
643
|
-
*
|
|
644
|
-
* @param mode - Light or dark mode
|
|
645
|
-
* @returns MUI Theme object for the current platform
|
|
646
|
-
*/
|
|
647
|
-
declare const getTheme: (mode: "light" | "dark") => Theme$2;
|
|
648
|
-
/**
|
|
649
|
-
* Get light theme for current platform
|
|
650
|
-
*/
|
|
651
|
-
declare const getLightTheme: () => Theme$2;
|
|
652
|
-
/**
|
|
653
|
-
* Get dark theme for current platform
|
|
654
|
-
*/
|
|
655
|
-
declare const getDarkTheme: () => Theme$2;
|
|
164
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
656
165
|
|
|
657
|
-
export { type
|
|
166
|
+
export { type CallTool, type CallToolResponse, ChatGPTSimulator, type DeviceType, type DisplayMode, type OpenAiAPI, type OpenAiGlobals, type RequestDisplayMode, SCREEN_WIDTHS, SET_GLOBALS_EVENT_TYPE, type SafeArea, type SafeAreaInsets, type ScreenWidth, SetGlobalsEvent, type SimulatorConfig, type Theme, ThemeProvider, type UnknownObject, type UserAgent, cn, initMockOpenAI, useDisplayMode, useIsMobile, useMaxHeight, useOpenAiGlobal, useTheme, useThemeContext, useWidgetState };
|