@grafana/assistant 0.1.8 → 0.1.10
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 +106 -126
- package/dist/context/page.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/sidebar.d.ts +3 -2
- package/dist/sidebar.d.ts.map +1 -1
- package/dist/terms/index.d.ts +10 -14
- package/dist/terms/index.d.ts.map +1 -1
- package/dist/terms/settings.gen.d.ts +142 -0
- package/dist/terms/settings.gen.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ function MyComponent() {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
return (
|
|
39
|
-
<button onClick={() => openAssistant({
|
|
39
|
+
<button onClick={() => openAssistant({
|
|
40
40
|
origin: 'grafana/panel-data-analyzer',
|
|
41
41
|
prompt: 'Help me analyze data' })}>
|
|
42
42
|
Open Assistant
|
|
@@ -54,7 +54,11 @@ import { openAssistant, closeAssistant } from '@grafana/assistant';
|
|
|
54
54
|
openAssistant({ origin: 'grafana/some-feature', prompt: 'Show me CPU usage over the last hour' });
|
|
55
55
|
|
|
56
56
|
// Open the assistant with initial prompt and autoSend set to false
|
|
57
|
-
openAssistant({
|
|
57
|
+
openAssistant({
|
|
58
|
+
origin: 'grafana-datasources/prometheus/some-feature',
|
|
59
|
+
prompt: 'Help me analyze data',
|
|
60
|
+
autoSend: false,
|
|
61
|
+
});
|
|
58
62
|
|
|
59
63
|
// Open the assistant without an initial prompt
|
|
60
64
|
openAssistant({
|
|
@@ -79,14 +83,14 @@ const dashboardContext = createAssistantContextItem('dashboard', {
|
|
|
79
83
|
dashboardUid: 'dashboard-uid',
|
|
80
84
|
dashboardTitle: 'System Overview',
|
|
81
85
|
folderUid: 'folder-uid',
|
|
82
|
-
folderTitle: 'Production'
|
|
86
|
+
folderTitle: 'Production',
|
|
83
87
|
});
|
|
84
88
|
|
|
85
89
|
// Open the assistant with initial prompt and context
|
|
86
|
-
openAssistant({
|
|
90
|
+
openAssistant({
|
|
87
91
|
origin: 'grafana/dashboard-page',
|
|
88
92
|
prompt: 'Analyze the CPU metrics from this dashboard',
|
|
89
|
-
context: [datasourceContext, dashboardContext]
|
|
93
|
+
context: [datasourceContext, dashboardContext],
|
|
90
94
|
});
|
|
91
95
|
|
|
92
96
|
// Create hidden context for system instructions (won't show in UI pills)
|
|
@@ -95,14 +99,14 @@ const systemInstructions = createAssistantContextItem('structured', {
|
|
|
95
99
|
title: 'System Instructions',
|
|
96
100
|
data: {
|
|
97
101
|
instructions: 'When analyzing metrics, always consider seasonal patterns and anomalies',
|
|
98
|
-
preferences: 'Use clear, technical language and provide actionable insights'
|
|
99
|
-
}
|
|
102
|
+
preferences: 'Use clear, technical language and provide actionable insights',
|
|
103
|
+
},
|
|
100
104
|
});
|
|
101
105
|
|
|
102
106
|
// Include hidden context with visible context
|
|
103
|
-
openAssistant({
|
|
107
|
+
openAssistant({
|
|
104
108
|
prompt: 'What are the trends in this data?',
|
|
105
|
-
context: [datasourceContext, systemInstructions]
|
|
109
|
+
context: [datasourceContext, systemInstructions],
|
|
106
110
|
});
|
|
107
111
|
```
|
|
108
112
|
|
|
@@ -119,8 +123,8 @@ const dashboardContext = createAssistantContextItem('structured', {
|
|
|
119
123
|
name: 'Dashboard Context',
|
|
120
124
|
pageType: 'dashboard',
|
|
121
125
|
capabilities: ['view', 'edit', 'share'],
|
|
122
|
-
help: 'Use the assistant to analyze dashboard data, create queries, or troubleshoot issues.'
|
|
123
|
-
}
|
|
126
|
+
help: 'Use the assistant to analyze dashboard data, create queries, or troubleshoot issues.',
|
|
127
|
+
},
|
|
124
128
|
});
|
|
125
129
|
|
|
126
130
|
// Register context for all dashboard pages and get a setter function
|
|
@@ -133,9 +137,9 @@ setContext([
|
|
|
133
137
|
data: {
|
|
134
138
|
name: 'Panel Context',
|
|
135
139
|
selectedPanel: 'cpu-usage-panel',
|
|
136
|
-
panelType: 'graph'
|
|
137
|
-
}
|
|
138
|
-
})
|
|
140
|
+
panelType: 'graph',
|
|
141
|
+
},
|
|
142
|
+
}),
|
|
139
143
|
]);
|
|
140
144
|
|
|
141
145
|
// Clean up when no longer needed
|
|
@@ -147,7 +151,8 @@ providePageContext('/explore', [
|
|
|
147
151
|
hidden: true,
|
|
148
152
|
title: 'Additional instructions',
|
|
149
153
|
data: {
|
|
150
|
-
'System Instructions':
|
|
154
|
+
'System Instructions':
|
|
155
|
+
'When working with explore queries, always validate the time range and check for data availability. Suggest using recording rules for expensive queries.',
|
|
151
156
|
},
|
|
152
157
|
}),
|
|
153
158
|
]);
|
|
@@ -197,9 +202,9 @@ import { usePageContext } from '@grafana/assistant';
|
|
|
197
202
|
|
|
198
203
|
function MyComponent() {
|
|
199
204
|
const pageContext = usePageContext();
|
|
200
|
-
|
|
205
|
+
|
|
201
206
|
console.log('Active context items:', pageContext);
|
|
202
|
-
|
|
207
|
+
|
|
203
208
|
return <div>Page has {pageContext.length} context items</div>;
|
|
204
209
|
}
|
|
205
210
|
```
|
|
@@ -215,7 +220,7 @@ import { createAssistantContextItem } from '@grafana/assistant';
|
|
|
215
220
|
const datasourceContext = createAssistantContextItem('datasource', {
|
|
216
221
|
datasourceUid: 'prom-123',
|
|
217
222
|
title: 'Main Datasource', // Optional custom title
|
|
218
|
-
icon: 'database' // Optional custom icon
|
|
223
|
+
icon: 'database', // Optional custom icon
|
|
219
224
|
});
|
|
220
225
|
|
|
221
226
|
// Create a dashboard context
|
|
@@ -223,14 +228,14 @@ const dashboardContext = createAssistantContextItem('dashboard', {
|
|
|
223
228
|
dashboardUid: 'dash-456',
|
|
224
229
|
dashboardTitle: 'Application Overview',
|
|
225
230
|
folderUid: 'folder-789',
|
|
226
|
-
folderTitle: 'Production Dashboards'
|
|
231
|
+
folderTitle: 'Production Dashboards',
|
|
227
232
|
});
|
|
228
233
|
|
|
229
234
|
// Create a label context
|
|
230
235
|
const labelContext = createAssistantContextItem('label_name', {
|
|
231
236
|
datasourceUid: 'prom-123',
|
|
232
237
|
datasourceType: 'prometheus',
|
|
233
|
-
labelName: 'service'
|
|
238
|
+
labelName: 'service',
|
|
234
239
|
});
|
|
235
240
|
|
|
236
241
|
// Create a label value context
|
|
@@ -238,13 +243,13 @@ const labelValueContext = createAssistantContextItem('label_value', {
|
|
|
238
243
|
datasourceUid: 'prom-123',
|
|
239
244
|
datasourceType: 'prometheus',
|
|
240
245
|
labelName: 'service',
|
|
241
|
-
labelValue: 'api-server'
|
|
246
|
+
labelValue: 'api-server',
|
|
242
247
|
});
|
|
243
248
|
|
|
244
249
|
// Create a folder context
|
|
245
250
|
const folderContext = createAssistantContextItem('dashboard_folder', {
|
|
246
251
|
folderUid: 'folder-789',
|
|
247
|
-
folderTitle: 'Production Dashboards'
|
|
252
|
+
folderTitle: 'Production Dashboards',
|
|
248
253
|
});
|
|
249
254
|
|
|
250
255
|
// Create structured data context
|
|
@@ -252,14 +257,14 @@ const structuredContext = createAssistantContextItem('structured', {
|
|
|
252
257
|
data: {
|
|
253
258
|
name: 'Custom Data',
|
|
254
259
|
metrics: ['cpu_usage', 'memory_usage'],
|
|
255
|
-
threshold: 80
|
|
256
|
-
}
|
|
260
|
+
threshold: 80,
|
|
261
|
+
},
|
|
257
262
|
});
|
|
258
263
|
|
|
259
264
|
// Create generic context
|
|
260
265
|
const genericContext = createAssistantContextItem('unknown', {
|
|
261
266
|
id: 'my-context',
|
|
262
|
-
text: 'Some additional context information'
|
|
267
|
+
text: 'Some additional context information',
|
|
263
268
|
});
|
|
264
269
|
|
|
265
270
|
// Create component context for custom React components
|
|
@@ -278,12 +283,12 @@ const componentContext = createAssistantContextItem('component', {
|
|
|
278
283
|
|
|
279
284
|
// Create hidden context (useful for system instructions)
|
|
280
285
|
const hiddenInstructions = createAssistantContextItem('structured', {
|
|
281
|
-
hidden: true,
|
|
286
|
+
hidden: true, // Won't be shown in UI pills but will be sent to the assistant
|
|
282
287
|
title: 'Page-specific instructions',
|
|
283
288
|
data: {
|
|
284
289
|
instructions: 'Always provide step-by-step explanations',
|
|
285
|
-
context: 'This is a complex system with multiple dependencies'
|
|
286
|
-
}
|
|
290
|
+
context: 'This is a complex system with multiple dependencies',
|
|
291
|
+
},
|
|
287
292
|
});
|
|
288
293
|
```
|
|
289
294
|
|
|
@@ -357,6 +362,7 @@ export function configureAssistantContext() {
|
|
|
357
362
|
- **No Code Blocks**: Custom components should never be wrapped in markdown code blocks
|
|
358
363
|
|
|
359
364
|
**Example Component Implementation:**
|
|
365
|
+
|
|
360
366
|
```typescript
|
|
361
367
|
interface MyEntityMentionProps {
|
|
362
368
|
name: string;
|
|
@@ -369,8 +375,8 @@ interface MyEntityMentionProps {
|
|
|
369
375
|
|
|
370
376
|
const MyEntityMention: React.FC<MyEntityMentionProps> = ({ name, type, env, site, namespace, properties }) => {
|
|
371
377
|
return (
|
|
372
|
-
<span
|
|
373
|
-
className="entity-mention"
|
|
378
|
+
<span
|
|
379
|
+
className="entity-mention"
|
|
374
380
|
data-entity-type={type}
|
|
375
381
|
title={`${type}: ${name}`}
|
|
376
382
|
>
|
|
@@ -402,14 +408,14 @@ providePageContext('/explore', [
|
|
|
402
408
|
instructions: [
|
|
403
409
|
'Always validate time ranges before running queries',
|
|
404
410
|
'Suggest using recording rules for expensive queries',
|
|
405
|
-
'Warn about queries that might impact performance'
|
|
411
|
+
'Warn about queries that might impact performance',
|
|
406
412
|
],
|
|
407
413
|
queryLimits: {
|
|
408
414
|
maxTimeRange: '24h',
|
|
409
|
-
suggestedSampleInterval: '1m'
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
})
|
|
415
|
+
suggestedSampleInterval: '1m',
|
|
416
|
+
},
|
|
417
|
+
},
|
|
418
|
+
}),
|
|
413
419
|
]);
|
|
414
420
|
|
|
415
421
|
// Add dashboard-specific context
|
|
@@ -419,21 +425,21 @@ providePageContext('/d/*', [
|
|
|
419
425
|
title: 'Dashboard Instructions',
|
|
420
426
|
data: {
|
|
421
427
|
bestPractices: 'Encourage users to use template variables for flexibility',
|
|
422
|
-
performance: 'Suggest panel caching for slow queries'
|
|
423
|
-
}
|
|
424
|
-
})
|
|
428
|
+
performance: 'Suggest panel caching for slow queries',
|
|
429
|
+
},
|
|
430
|
+
}),
|
|
425
431
|
]);
|
|
426
432
|
```
|
|
427
433
|
|
|
428
434
|
### Exposing Functions to the Assistant
|
|
429
435
|
|
|
430
436
|
```typescript
|
|
431
|
-
import {
|
|
432
|
-
getExposeAssistantFunctionsConfig,
|
|
437
|
+
import {
|
|
438
|
+
getExposeAssistantFunctionsConfig,
|
|
433
439
|
newFunctionNamespace,
|
|
434
440
|
FunctionImplementation,
|
|
435
441
|
FunctionNamespace,
|
|
436
|
-
NamedFunctions
|
|
442
|
+
NamedFunctions,
|
|
437
443
|
} from '@grafana/assistant';
|
|
438
444
|
|
|
439
445
|
// Define your functions
|
|
@@ -441,19 +447,17 @@ const myFunctions: NamedFunctions = {
|
|
|
441
447
|
getMetrics: (datasource: string) => {
|
|
442
448
|
return ['cpu_usage', 'memory_usage', 'disk_io'];
|
|
443
449
|
},
|
|
444
|
-
|
|
450
|
+
|
|
445
451
|
calculateAverage: (values: number[]) => {
|
|
446
452
|
return values.reduce((a, b) => a + b, 0) / values.length;
|
|
447
|
-
}
|
|
453
|
+
},
|
|
448
454
|
};
|
|
449
455
|
|
|
450
456
|
// Create a namespace for your functions
|
|
451
457
|
const namespace = newFunctionNamespace('myPlugin', myFunctions);
|
|
452
458
|
|
|
453
459
|
// Export the configuration for your plugin
|
|
454
|
-
export const getExtensionConfigs = () => [
|
|
455
|
-
getExposeAssistantFunctionsConfig([namespace])
|
|
456
|
-
];
|
|
460
|
+
export const getExtensionConfigs = () => [getExposeAssistantFunctionsConfig([namespace])];
|
|
457
461
|
```
|
|
458
462
|
|
|
459
463
|
### Using the OpenAssistantButton Component
|
|
@@ -472,14 +476,14 @@ function MyDashboard() {
|
|
|
472
476
|
return (
|
|
473
477
|
<div>
|
|
474
478
|
<h1>Dashboard</h1>
|
|
475
|
-
|
|
479
|
+
|
|
476
480
|
{/* Basic usage */}
|
|
477
481
|
<OpenAssistantButton
|
|
478
482
|
prompt="Help me analyze the CPU usage trends in this dashboard"
|
|
479
483
|
context={[dashboardContext]}
|
|
480
484
|
origin="grafana/dashboard-menu"
|
|
481
485
|
/>
|
|
482
|
-
|
|
486
|
+
|
|
483
487
|
{/* Icon-only button */}
|
|
484
488
|
<OpenAssistantButton
|
|
485
489
|
prompt="Show me optimization suggestions"
|
|
@@ -488,7 +492,7 @@ function MyDashboard() {
|
|
|
488
492
|
size="md"
|
|
489
493
|
origin="grafana-datasources/loki/query-editor"
|
|
490
494
|
/>
|
|
491
|
-
|
|
495
|
+
|
|
492
496
|
{/* Button without auto-send */}
|
|
493
497
|
<OpenAssistantButton
|
|
494
498
|
prompt="What patterns do you see in the data?"
|
|
@@ -511,20 +515,21 @@ function MyDashboard() {
|
|
|
511
515
|
A React hook that provides assistant availability status and control functions.
|
|
512
516
|
|
|
513
517
|
**Returns:** An object with the following properties:
|
|
518
|
+
|
|
514
519
|
- `isAvailable: boolean` - Whether the Assistant is available
|
|
515
520
|
- `openAssistant?: (props: OpenAssistantProps) => void` - Function to open the assistant (undefined if not available)
|
|
516
521
|
- `closeAssistant?: () => void` - Function to close the assistant (undefined if not available)
|
|
517
522
|
- `toggleAssistant?: (props: OpenAssistantProps) => void` - Function to toggle the assistant (undefined if not available)
|
|
518
523
|
|
|
519
|
-
#### `useTerms(): { accepted: boolean; loading: boolean; error: string | null
|
|
524
|
+
#### `useTerms(): { accepted: boolean; loading: boolean; error: string | null }`
|
|
520
525
|
|
|
521
526
|
A React hook to check terms and conditions acceptance status. Automatically fetches terms data on mount and provides loading/error states.
|
|
522
527
|
|
|
523
528
|
**Returns:** An object with the following properties:
|
|
529
|
+
|
|
524
530
|
- `accepted: boolean` - Whether terms are accepted and up-to-date
|
|
525
531
|
- `loading: boolean` - Whether the check is in progress
|
|
526
532
|
- `error: string | null` - Error message if the check failed, null otherwise
|
|
527
|
-
- `acceptTerms: () => Promise<void>` - Function to accept the current terms and conditions
|
|
528
533
|
|
|
529
534
|
#### `usePageContext(): ChatContextItem[]`
|
|
530
535
|
|
|
@@ -537,6 +542,7 @@ A React hook that returns all active context items for the current page based on
|
|
|
537
542
|
A React hook for providing page context that automatically cleans up on unmount. This is the recommended way to use page context in React components.
|
|
538
543
|
|
|
539
544
|
**Parameters:**
|
|
545
|
+
|
|
540
546
|
- `urlPattern` - URL pattern (string or RegExp) to match against page URLs
|
|
541
547
|
- `initialContext` - Initial array of ChatContextItem to provide when the pattern matches (defaults to empty array)
|
|
542
548
|
|
|
@@ -549,15 +555,16 @@ A React hook that provides all components available for the current page. This h
|
|
|
549
555
|
**Returns:** Object containing all components available for the current page, keyed by `namespace_componentName` format.
|
|
550
556
|
|
|
551
557
|
**Example:**
|
|
558
|
+
|
|
552
559
|
```typescript
|
|
553
560
|
import { usePageComponents } from '@grafana/assistant';
|
|
554
561
|
|
|
555
562
|
function MyAssistantComponent() {
|
|
556
563
|
const components = usePageComponents();
|
|
557
|
-
|
|
564
|
+
|
|
558
565
|
// Access components registered with namespace 'myapp' and component name 'EntityMention'
|
|
559
566
|
const EntityMentionComponent = components['myapp_EntityMention'];
|
|
560
|
-
|
|
567
|
+
|
|
561
568
|
return (
|
|
562
569
|
<div>
|
|
563
570
|
Available components: {Object.keys(components).join(', ')}
|
|
@@ -573,8 +580,9 @@ function MyAssistantComponent() {
|
|
|
573
580
|
A pre-built React component that renders a button to open the Grafana Assistant with configurable prompt and context.
|
|
574
581
|
|
|
575
582
|
**Parameters:**
|
|
583
|
+
|
|
576
584
|
- `prompt: string` - **Required** The initial prompt to display in the assistant
|
|
577
|
-
- `origin: string` - **Required**
|
|
585
|
+
- `origin: string` - **Required** Origin of the request that opened the assistant. Should be structured using forward slashes with the first part as a namespace. Examples: 'grafana-datasources/prometheus/query-builder', 'grafana-slo-app/slo-editor-overview'
|
|
578
586
|
- `context?: ChatContextItem[]` - Optional context items created with `createAssistantContextItem`
|
|
579
587
|
- `autoSend?: boolean` - Whether to automatically send the initial prompt (defaults to `true`)
|
|
580
588
|
- `title?: string` - Text to display on the button (defaults to `'Analyze with Assistant'`)
|
|
@@ -706,6 +714,7 @@ export function PanelEditor() {
|
|
|
706
714
|
```
|
|
707
715
|
|
|
708
716
|
**Key Features:**
|
|
717
|
+
|
|
709
718
|
- `isGenerating` - Boolean indicating generation is in progress
|
|
710
719
|
- `content` - Current streaming content (updates in real-time)
|
|
711
720
|
- `generate(options)` - Start a new generation
|
|
@@ -738,7 +747,7 @@ export const createWeatherTool = (onToolComplete: (data: WeatherData) => void) =
|
|
|
738
747
|
return createTool(
|
|
739
748
|
async (input: z.infer<typeof weatherSchema>): Promise<ToolOutput> => {
|
|
740
749
|
const { city } = input;
|
|
741
|
-
|
|
750
|
+
|
|
742
751
|
// Fetch weather data (simplified example)
|
|
743
752
|
const weatherData: WeatherData = {
|
|
744
753
|
city,
|
|
@@ -746,10 +755,10 @@ export const createWeatherTool = (onToolComplete: (data: WeatherData) => void) =
|
|
|
746
755
|
conditions: 'Sunny',
|
|
747
756
|
humidity: 65,
|
|
748
757
|
};
|
|
749
|
-
|
|
758
|
+
|
|
750
759
|
// Call the callback to pass artifact data
|
|
751
760
|
onToolComplete(weatherData);
|
|
752
|
-
|
|
761
|
+
|
|
753
762
|
// Return tuple: [text response, artifact]
|
|
754
763
|
return [
|
|
755
764
|
`Current weather in ${city}: ${weatherData.temperature.celsius}°C, ${weatherData.conditions}`,
|
|
@@ -804,9 +813,12 @@ Checks if the assistant plugin is available.
|
|
|
804
813
|
|
|
805
814
|
### Terms and Conditions Functions
|
|
806
815
|
|
|
816
|
+
> **Note:** In most cases, plugins do not need to check terms directly. The Grafana Assistant automatically handles cases when terms are not accepted by prompting the user to accept them before proceeding.
|
|
817
|
+
|
|
807
818
|
#### `checkTerms(): Promise<boolean>`
|
|
808
819
|
|
|
809
820
|
Checks whether terms and conditions are accepted and up-to-date. This function verifies that:
|
|
821
|
+
|
|
810
822
|
1. Terms have been accepted
|
|
811
823
|
2. The accepted version matches or exceeds the current version
|
|
812
824
|
|
|
@@ -815,6 +827,7 @@ Checks whether terms and conditions are accepted and up-to-date. This function v
|
|
|
815
827
|
**Throws:** Error if the API call fails.
|
|
816
828
|
|
|
817
829
|
**Example:**
|
|
830
|
+
|
|
818
831
|
```typescript
|
|
819
832
|
import { checkTerms } from '@grafana/assistant';
|
|
820
833
|
|
|
@@ -829,52 +842,6 @@ try {
|
|
|
829
842
|
}
|
|
830
843
|
```
|
|
831
844
|
|
|
832
|
-
#### `acceptTerms(): Promise<void>`
|
|
833
|
-
|
|
834
|
-
Accepts terms and conditions for the current tenant. This function sends a PUT request to mark the current terms version as accepted.
|
|
835
|
-
|
|
836
|
-
**Returns:** A promise that resolves when terms are successfully accepted.
|
|
837
|
-
|
|
838
|
-
**Throws:** Error if the API call fails.
|
|
839
|
-
|
|
840
|
-
**Example:**
|
|
841
|
-
|
|
842
|
-
```typescript
|
|
843
|
-
import { acceptTerms } from '@grafana/assistant';
|
|
844
|
-
|
|
845
|
-
try {
|
|
846
|
-
await acceptTerms();
|
|
847
|
-
console.log('Terms accepted successfully');
|
|
848
|
-
} catch (error) {
|
|
849
|
-
// Handle error
|
|
850
|
-
console.error('Failed to accept terms:', error);
|
|
851
|
-
}
|
|
852
|
-
```
|
|
853
|
-
|
|
854
|
-
**Example with `useTerms` hook:**
|
|
855
|
-
|
|
856
|
-
```typescript
|
|
857
|
-
import { useTerms } from '@grafana/assistant';
|
|
858
|
-
|
|
859
|
-
function TermsComponent() {
|
|
860
|
-
const { accepted, loading, error, acceptTerms } = useTerms();
|
|
861
|
-
|
|
862
|
-
if (loading) return <div>Loading...</div>;
|
|
863
|
-
if (error) return <div>Error: {error}</div>;
|
|
864
|
-
|
|
865
|
-
if (!accepted) {
|
|
866
|
-
return (
|
|
867
|
-
<div>
|
|
868
|
-
<p>Please accept the terms and conditions</p>
|
|
869
|
-
<button onClick={() => acceptTerms()}>Accept Terms</button>
|
|
870
|
-
</div>
|
|
871
|
-
);
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
return <div>Terms accepted</div>;
|
|
875
|
-
}
|
|
876
|
-
```
|
|
877
|
-
|
|
878
845
|
### Sidebar Functions
|
|
879
846
|
|
|
880
847
|
#### `openAssistant(props: OpenAssistantProps): void`
|
|
@@ -882,6 +849,7 @@ function TermsComponent() {
|
|
|
882
849
|
Opens the Grafana Assistant sidebar.
|
|
883
850
|
|
|
884
851
|
**Parameters:**
|
|
852
|
+
|
|
885
853
|
- `props: OpenAssistantProps` - Configuration object
|
|
886
854
|
- `origin: string` - Origin of the request that opened the assistant. Should be structured using forward slashes with the first part as a namespace. Examples: 'grafana-datasources/prometheus/query-builder', 'grafana-slo-app/slo-editor-overview'
|
|
887
855
|
- `prompt?: string` - Optional initial prompt to display in the assistant
|
|
@@ -899,9 +867,10 @@ Closes the Grafana Assistant sidebar.
|
|
|
899
867
|
Creates a context item that can be passed to the assistant to provide additional information.
|
|
900
868
|
|
|
901
869
|
**Parameters:**
|
|
870
|
+
|
|
902
871
|
- `type` - The type of context to create. Supported types:
|
|
903
872
|
- `'datasource'` - Datasource context
|
|
904
|
-
- `'dashboard'` - Dashboard context
|
|
873
|
+
- `'dashboard'` - Dashboard context
|
|
905
874
|
- `'dashboard_folder'` - Folder context
|
|
906
875
|
- `'label_name'` - Label name context
|
|
907
876
|
- `'label_value'` - Label value context
|
|
@@ -918,6 +887,7 @@ Creates a context item that can be passed to the assistant to provide additional
|
|
|
918
887
|
Registers context items for specific pages based on URL patterns. Returns a setter function to update the context dynamically. The context will be automatically included when the assistant is opened on pages matching the pattern.
|
|
919
888
|
|
|
920
889
|
**Parameters:**
|
|
890
|
+
|
|
921
891
|
- `urlPattern` - URL pattern (string with wildcards or RegExp) to match against page URLs
|
|
922
892
|
- String patterns support `*` (match any characters) and `**` (match any path segments)
|
|
923
893
|
- RegExp patterns provide full regex matching capabilities
|
|
@@ -926,12 +896,13 @@ Registers context items for specific pages based on URL patterns. Returns a sett
|
|
|
926
896
|
**Returns:** A setter function to update the context, with an `unregister` method attached for cleanup
|
|
927
897
|
|
|
928
898
|
**Examples:**
|
|
899
|
+
|
|
929
900
|
```typescript
|
|
930
901
|
// String patterns - returns setter function
|
|
931
902
|
const setDashboardContext = providePageContext('/d/*', initialContext); // Match any dashboard
|
|
932
903
|
const setExploreContext = providePageContext('/explore**', initialContext); // Match explore and subpaths
|
|
933
904
|
|
|
934
|
-
// RegExp patterns
|
|
905
|
+
// RegExp patterns
|
|
935
906
|
const setSpecificContext = providePageContext(/^\/d\/[a-zA-Z0-9]+$/, initialContext); // Match specific dashboard format
|
|
936
907
|
|
|
937
908
|
// Update context dynamically
|
|
@@ -946,6 +917,7 @@ setDashboardContext.unregister();
|
|
|
946
917
|
A simplified function for providing components to the assistant. This is a convenience wrapper around `providePageContext` specifically for registering components.
|
|
947
918
|
|
|
948
919
|
**Parameters:**
|
|
920
|
+
|
|
949
921
|
- `prompt` - Instructions for the assistant on how and when to use these components
|
|
950
922
|
- `namespace` - A unique identifier for your app's components (e.g., 'myapp', 'datasource')
|
|
951
923
|
- `components` - A record of component names to their React component implementations
|
|
@@ -954,6 +926,7 @@ A simplified function for providing components to the assistant. This is a conve
|
|
|
954
926
|
**Returns:** A setter function to update the context, with an `unregister` method attached for cleanup
|
|
955
927
|
|
|
956
928
|
**Example:**
|
|
929
|
+
|
|
957
930
|
```typescript
|
|
958
931
|
import { provideComponents } from '@grafana/assistant';
|
|
959
932
|
import MyEntityMention from './components/MyEntityMention';
|
|
@@ -994,27 +967,29 @@ The questions system allows external parties to provide sample prompts with opti
|
|
|
994
967
|
Registers questions for specific pages based on URL patterns. Returns a setter function to update the questions dynamically.
|
|
995
968
|
|
|
996
969
|
**Parameters:**
|
|
970
|
+
|
|
997
971
|
- `urlPattern` - URL pattern (string with wildcards or RegExp) to match against page URLs
|
|
998
972
|
- `initialQuestions` - Initial array of `Question` to provide when the pattern matches
|
|
999
973
|
|
|
1000
974
|
**Returns:** A setter function to update the questions, with an `unregister` method attached for cleanup
|
|
1001
975
|
|
|
1002
976
|
**Examples:**
|
|
977
|
+
|
|
1003
978
|
```typescript
|
|
1004
979
|
// Register questions for dashboard pages
|
|
1005
|
-
const setQuestions = provideQuestions(
|
|
980
|
+
const setQuestions = provideQuestions('/d/*', [
|
|
1006
981
|
{
|
|
1007
|
-
prompt:
|
|
982
|
+
prompt: 'What metrics are available in this dashboard?',
|
|
1008
983
|
context: [], // Optional context items created with `createAssistantContextItem`
|
|
1009
984
|
},
|
|
1010
985
|
{
|
|
1011
|
-
prompt:
|
|
986
|
+
prompt: 'How can I optimize the queries in this dashboard?',
|
|
1012
987
|
context: [
|
|
1013
|
-
createAssistantContextItem(
|
|
988
|
+
createAssistantContextItem('dashboard', {
|
|
1014
989
|
dashboardUid: 'dashboard-uid',
|
|
1015
990
|
dashboardTitle: 'System Overview',
|
|
1016
991
|
folderUid: 'folder-uid',
|
|
1017
|
-
folderTitle: 'Production'
|
|
992
|
+
folderTitle: 'Production',
|
|
1018
993
|
}),
|
|
1019
994
|
],
|
|
1020
995
|
},
|
|
@@ -1023,9 +998,9 @@ const setQuestions = provideQuestions("/d/*", [
|
|
|
1023
998
|
// Update questions dynamically
|
|
1024
999
|
setQuestions([
|
|
1025
1000
|
{
|
|
1026
|
-
prompt:
|
|
1027
|
-
context: []
|
|
1028
|
-
}
|
|
1001
|
+
prompt: 'What are the key insights from this dashboard?',
|
|
1002
|
+
context: [],
|
|
1003
|
+
},
|
|
1029
1004
|
]);
|
|
1030
1005
|
|
|
1031
1006
|
// Cleanup when done
|
|
@@ -1037,12 +1012,14 @@ setQuestions.unregister();
|
|
|
1037
1012
|
React hook for providing questions that automatically cleans up on unmount. This is the recommended way to use questions in React components.
|
|
1038
1013
|
|
|
1039
1014
|
**Parameters:**
|
|
1015
|
+
|
|
1040
1016
|
- `urlPattern` - URL pattern (string or RegExp) to match against page URLs
|
|
1041
1017
|
- `initialQuestions` - Initial array of questions to provide when the pattern matches (defaults to empty array)
|
|
1042
1018
|
|
|
1043
1019
|
**Returns:** A setter function to update the questions
|
|
1044
1020
|
|
|
1045
1021
|
**Example:**
|
|
1022
|
+
|
|
1046
1023
|
```typescript
|
|
1047
1024
|
function DashboardComponent() {
|
|
1048
1025
|
const setQuestions = useProvideQuestions('/d/*', [
|
|
@@ -1065,10 +1042,11 @@ React hook to get all questions that match the current URL. This filters the pag
|
|
|
1065
1042
|
**Returns:** Array of questions from all matching registrations
|
|
1066
1043
|
|
|
1067
1044
|
**Example:**
|
|
1045
|
+
|
|
1068
1046
|
```typescript
|
|
1069
1047
|
function AssistantComponent() {
|
|
1070
1048
|
const questions = useQuestions();
|
|
1071
|
-
|
|
1049
|
+
|
|
1072
1050
|
return (
|
|
1073
1051
|
<div>
|
|
1074
1052
|
<h3>Suggested Questions:</h3>
|
|
@@ -1134,7 +1112,7 @@ Represents a registered page context mapping.
|
|
|
1134
1112
|
|
|
1135
1113
|
```typescript
|
|
1136
1114
|
interface Question {
|
|
1137
|
-
prompt: string;
|
|
1115
|
+
prompt: string; // The sample prompt/question
|
|
1138
1116
|
context?: ChatContextItem[]; // Optional context items
|
|
1139
1117
|
}
|
|
1140
1118
|
```
|
|
@@ -1162,7 +1140,7 @@ interface CreateDatasourceContextParams {
|
|
|
1162
1140
|
datasourceUid: string;
|
|
1163
1141
|
title?: string;
|
|
1164
1142
|
icon?: IconName;
|
|
1165
|
-
hidden?: boolean;
|
|
1143
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1166
1144
|
}
|
|
1167
1145
|
```
|
|
1168
1146
|
|
|
@@ -1176,7 +1154,7 @@ interface CreateDashboardContextParams {
|
|
|
1176
1154
|
folderTitle?: string;
|
|
1177
1155
|
title?: string;
|
|
1178
1156
|
icon?: IconName;
|
|
1179
|
-
hidden?: boolean;
|
|
1157
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1180
1158
|
}
|
|
1181
1159
|
```
|
|
1182
1160
|
|
|
@@ -1188,7 +1166,7 @@ interface CreateFolderContextParams {
|
|
|
1188
1166
|
folderTitle: string;
|
|
1189
1167
|
title?: string;
|
|
1190
1168
|
icon?: IconName;
|
|
1191
|
-
hidden?: boolean;
|
|
1169
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1192
1170
|
}
|
|
1193
1171
|
```
|
|
1194
1172
|
|
|
@@ -1201,7 +1179,7 @@ interface CreateLabelNameContextParams {
|
|
|
1201
1179
|
labelName: string;
|
|
1202
1180
|
title?: string;
|
|
1203
1181
|
icon?: IconName;
|
|
1204
|
-
hidden?: boolean;
|
|
1182
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1205
1183
|
}
|
|
1206
1184
|
```
|
|
1207
1185
|
|
|
@@ -1215,7 +1193,7 @@ interface CreateLabelValueContextParams {
|
|
|
1215
1193
|
labelValue: string;
|
|
1216
1194
|
title?: string;
|
|
1217
1195
|
icon?: IconName;
|
|
1218
|
-
hidden?: boolean;
|
|
1196
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1219
1197
|
}
|
|
1220
1198
|
```
|
|
1221
1199
|
|
|
@@ -1226,7 +1204,7 @@ interface StructuredNodeDataParams {
|
|
|
1226
1204
|
data: Record<string, any>;
|
|
1227
1205
|
title?: string;
|
|
1228
1206
|
icon?: IconName;
|
|
1229
|
-
hidden?: boolean;
|
|
1207
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1230
1208
|
}
|
|
1231
1209
|
```
|
|
1232
1210
|
|
|
@@ -1236,10 +1214,10 @@ interface StructuredNodeDataParams {
|
|
|
1236
1214
|
interface CreateComponentContextParams {
|
|
1237
1215
|
components: Record<string, React.ComponentType<any>>;
|
|
1238
1216
|
prompt: string;
|
|
1239
|
-
namespace?: string;
|
|
1217
|
+
namespace?: string; // Optional: defaults to 'components' if not provided
|
|
1240
1218
|
title?: string;
|
|
1241
1219
|
icon?: IconName;
|
|
1242
|
-
hidden?: boolean;
|
|
1220
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1243
1221
|
}
|
|
1244
1222
|
```
|
|
1245
1223
|
|
|
@@ -1251,7 +1229,7 @@ interface NodeDataParams {
|
|
|
1251
1229
|
text?: string;
|
|
1252
1230
|
title?: string;
|
|
1253
1231
|
icon?: IconName;
|
|
1254
|
-
hidden?: boolean;
|
|
1232
|
+
hidden?: boolean; // If true, the context item will not be shown in the context pills
|
|
1255
1233
|
}
|
|
1256
1234
|
```
|
|
1257
1235
|
|
|
@@ -1299,6 +1277,7 @@ Groups functions under a namespace.
|
|
|
1299
1277
|
Creates a new function namespace.
|
|
1300
1278
|
|
|
1301
1279
|
**Parameters:**
|
|
1280
|
+
|
|
1302
1281
|
- `namespace: string` - The namespace identifier
|
|
1303
1282
|
- `functions: NamedFunctions` - The functions to include in the namespace
|
|
1304
1283
|
|
|
@@ -1307,6 +1286,7 @@ Creates a new function namespace.
|
|
|
1307
1286
|
Creates a plugin extension configuration for exposing functions to the assistant.
|
|
1308
1287
|
|
|
1309
1288
|
**Parameters:**
|
|
1289
|
+
|
|
1310
1290
|
- `namespaces: FunctionNamespace[]` - Array of function namespaces to expose
|
|
1311
1291
|
|
|
1312
1292
|
### Constants
|
|
@@ -1326,7 +1306,7 @@ The package also exports the following types for advanced use cases:
|
|
|
1326
1306
|
```typescript
|
|
1327
1307
|
// Data types for context items
|
|
1328
1308
|
export type DashboardNodeData;
|
|
1329
|
-
export type DatasourceNodeData;
|
|
1309
|
+
export type DatasourceNodeData;
|
|
1330
1310
|
export type FolderNodeData;
|
|
1331
1311
|
export type LabelNameNodeData;
|
|
1332
1312
|
export type LabelValueNodeData;
|
|
@@ -1341,4 +1321,4 @@ export type NamedComponents;
|
|
|
1341
1321
|
|
|
1342
1322
|
## License
|
|
1343
1323
|
|
|
1344
|
-
Apache-2.0
|
|
1324
|
+
Apache-2.0
|