@grafana/assistant 0.0.15 → 0.0.17

package/README.md

@@ -36,7 +36,9 @@ function MyComponent() {
   }
 
   return (
-    <button onClick={() => openAssistant({ prompt: 'Help me analyze data' })}>
+    <button onClick={() => openAssistant({ 
+      origin: 'grafana/panel-data-analyzer',
+      prompt: 'Help me analyze data' })}>
       Open Assistant
     </button>
   );
@@ -49,10 +51,15 @@ function MyComponent() {
 import { openAssistant, closeAssistant } from '@grafana/assistant';
 
 // Open the assistant with an initial prompt
-openAssistant({ prompt: 'Show me CPU usage over the last hour' });
+openAssistant({ origin: 'grafana/some-feature', prompt: 'Show me CPU usage over the last hour' });
+
+// Open the assistant with initial prompt and autoSend set to false
+openAssistant({ origin: 'grafana-datasources/prometheus/some-feature', prompt: 'Help me analyze data', autoSend: false })
 
 // Open the assistant without an initial prompt
-openAssistant({});
+openAssistant({
+  origin: 'grafana-slo-app/some-page',
+});
 
 // Close the assistant
 closeAssistant();
@@ -61,16 +68,14 @@ closeAssistant();
 ### Using Context with the Assistant
 
 ```typescript
-import { openAssistant, createContext } from '@grafana/assistant';
+import { openAssistant, createAssistantContextItem } from '@grafana/assistant';
 
 // Create context items to provide additional information to the assistant
-const datasourceContext = createContext('datasource', {
-  datasourceName: 'My Prometheus',
+const datasourceContext = createAssistantContextItem('datasource', {
   datasourceUid: 'prometheus-uid',
-  datasourceType: 'prometheus'
 });
 
-const dashboardContext = createContext('dashboard', {
+const dashboardContext = createAssistantContextItem('dashboard', {
   dashboardUid: 'dashboard-uid',
   dashboardTitle: 'System Overview',
   folderUid: 'folder-uid',
@@ -79,9 +84,26 @@ const dashboardContext = createContext('dashboard', {
 
 // Open the assistant with initial prompt and context
 openAssistant({ 
+  origin: 'grafana/dashboard-page',
   prompt: 'Analyze the CPU metrics from this dashboard',
   context: [datasourceContext, dashboardContext]
 });
+
+// Create hidden context for system instructions (won't show in UI pills)
+const systemInstructions = createAssistantContextItem('structured', {
+  hidden: true,
+  title: 'System Instructions',
+  data: {
+    instructions: 'When analyzing metrics, always consider seasonal patterns and anomalies',
+    preferences: 'Use clear, technical language and provide actionable insights'
+  }
+});
+
+// Include hidden context with visible context
+openAssistant({ 
+  prompt: 'What are the trends in this data?',
+  context: [datasourceContext, systemInstructions]
+});
 ```
 
 ### Providing Page-Specific Context
@@ -89,10 +111,10 @@ openAssistant({
 You can register context items that are automatically included when the assistant is opened on pages matching specific URL patterns. The `providePageContext` function returns a setter function that allows you to update the context dynamically:
 
 ```typescript
-import { providePageContext, createContext } from '@grafana/assistant';
+import { providePageContext, createAssistantContextItem } from '@grafana/assistant';
 
 // Create initial context for dashboard pages
-const dashboardContext = createContext('structured', {
+const dashboardContext = createAssistantContextItem('structured', {
   data: {
     name: 'Dashboard Context',
     pageType: 'dashboard',
@@ -107,7 +129,7 @@ const setContext = providePageContext('/d/*', [dashboardContext]);
 // Later, dynamically update the context based on user interactions or data changes
 setContext([
   dashboardContext,
-  createContext('structured', {
+  createAssistantContextItem('structured', {
     data: {
       name: 'Panel Context',
       selectedPanel: 'cpu-usage-panel',
@@ -118,6 +140,17 @@ setContext([
 
 // Clean up when no longer needed
 setContext.unregister();
+
+// Example: Provide hidden system instructions for explore pages
+providePageContext('/explore', [
+  createAssistantContextItem('structured', {
+    hidden: true,
+    title: 'Additional instructions',
+    data: {
+      'System Instructions': 'When working with explore queries, always validate the time range and check for data availability. Suggest using recording rules for expensive queries.',
+    },
+  }),
+]);
 ```
 
 ### Using Page Context in React Components
@@ -125,10 +158,10 @@ setContext.unregister();
 For React components, use the `useProvidePageContext` hook which automatically handles cleanup:
 
 ```typescript
-import { useProvidePageContext, createContext } from '@grafana/assistant';
+import { useProvidePageContext, createAssistantContextItem } from '@grafana/assistant';
 
 function DashboardComponent() {
-  const dashboardContext = createContext('structured', {
+  const dashboardContext = createAssistantContextItem('structured', {
     data: {
       name: 'Dashboard Context',
       pageType: 'dashboard'
@@ -142,7 +175,7 @@ function DashboardComponent() {
   const handlePanelSelect = (panelId: string) => {
     setContext([
       dashboardContext,
-      createContext('structured', {
+      createAssistantContextItem('structured', {
         data: {
           name: 'Panel Context',
           selectedPanel: panelId
@@ -173,22 +206,20 @@ function MyComponent() {
 
 ### Creating Context Items
 
-The `createContext` function allows you to create structured context items that provide the assistant with additional information about your Grafana resources.
+The `createAssistantContextItem` function allows you to create structured context items that provide the assistant with additional information about your Grafana resources.
 
 ```typescript
-import { createContext } from '@grafana/assistant';
+import { createAssistantContextItem } from '@grafana/assistant';
 
 // Create a datasource context
-const datasourceContext = createContext('datasource', {
-  datasourceName: 'Production Prometheus',
+const datasourceContext = createAssistantContextItem('datasource', {
   datasourceUid: 'prom-123',
-  datasourceType: 'prometheus',
   title: 'Main Datasource', // Optional custom title
   icon: 'database' // Optional custom icon
 });
 
 // Create a dashboard context
-const dashboardContext = createContext('dashboard', {
+const dashboardContext = createAssistantContextItem('dashboard', {
   dashboardUid: 'dash-456',
   dashboardTitle: 'Application Overview',
   folderUid: 'folder-789',
@@ -196,14 +227,14 @@ const dashboardContext = createContext('dashboard', {
 });
 
 // Create a label context
-const labelContext = createContext('label_name', {
+const labelContext = createAssistantContextItem('label_name', {
   datasourceUid: 'prom-123',
   datasourceType: 'prometheus',
   labelName: 'service'
 });
 
 // Create a label value context
-const labelValueContext = createContext('label_value', {
+const labelValueContext = createAssistantContextItem('label_value', {
   datasourceUid: 'prom-123',
   datasourceType: 'prometheus',
   labelName: 'service',
@@ -211,13 +242,13 @@ const labelValueContext = createContext('label_value', {
 });
 
 // Create a folder context
-const folderContext = createContext('dashboard_folder', {
+const folderContext = createAssistantContextItem('dashboard_folder', {
   folderUid: 'folder-789',
   folderTitle: 'Production Dashboards'
 });
 
 // Create structured data context
-const structuredContext = createContext('structured', {
+const structuredContext = createAssistantContextItem('structured', {
   data: {
     name: 'Custom Data',
     metrics: ['cpu_usage', 'memory_usage'],
@@ -226,10 +257,172 @@ const structuredContext = createContext('structured', {
 });
 
 // Create generic context
-const genericContext = createContext('unknown', {
+const genericContext = createAssistantContextItem('unknown', {
   id: 'my-context',
   text: 'Some additional context information'
 });
+
+// Create component context for custom React components
+const componentContext = createAssistantContextItem('component', {
+  components: {
+    MyCustomComponent: MyCustomComponentImplementation,
+    AnotherComponent: AnotherComponentImplementation,
+  },
+  prompt: `
+- When mentioning specific entities, use the your_app_MyCustomComponent with the syntax: <your_app_MyCustomComponent prop1={'value1'} prop2={'value2'} />
+- Custom components must never be wrapped in code blocks (backticks \` or \`\`\`).
+- Always provide all required props when using custom components.
+`,
+  namespace: 'your_app', // Optional: Namespace for your components (defaults to 'components')
+});
+
+// Create hidden context (useful for system instructions)
+const hiddenInstructions = createAssistantContextItem('structured', {
+  hidden: true,  // Won't be shown in UI pills but will be sent to the assistant
+  title: 'Page-specific instructions',
+  data: {
+    instructions: 'Always provide step-by-step explanations',
+    context: 'This is a complex system with multiple dependencies'
+  }
+});
+```
+
+### Registering Custom Components for Assistant Usage
+
+The `component` context type allows you to register custom React components that the assistant can use in its responses. This is particularly useful for rendering domain-specific UI elements that enhance the user experience.
+
+> **⚠️ Important:** Components must be approved by #grafana-assistant before usage. Please reach out to the Grafana Assistant team for review and approval of your custom components before implementing them in production.
+
+#### Method 1: Using provideComponents (Recommended)
+
+```typescript
+import { provideComponents } from '@grafana/assistant';
+import MyEntityMention from 'components/MyEntityMentionComponent';
+import MyCustomChart from 'components/MyCustomChartComponent';
+
+/**
+ * Configure the assistant context for your app plugin.
+ * This sets up custom components that will be available to the Grafana Assistant
+ * when users are on any page matching the provided pattern.
+ */
+export function configureAssistantContext() {
+  provideComponents(
+    `
+    - When mentioning an entity in text, always use the your_app_MyEntityMention component: <your_app_MyEntityMention name={'entity name here'} type={'entity type here'} />
+    - For displaying charts, use the your_app_MyCustomChart component: <your_app_MyCustomChart data={chartData} title={'Chart Title'} />
+    - Custom components must never be wrapped in code blocks (backticks \` or \`\`\`).
+    `,
+    'your_app', // namespace
+    {
+      MyEntityMention,
+      MyCustomChart,
+    },
+    /.*/ // matches all pages
+  );
+}
+```
+
+#### Method 2: Using createAssistantContextItem with providePageContext
+
+```typescript
+import { createAssistantContextItem, providePageContext } from '@grafana/assistant';
+import MyEntityMention from 'components/MyEntityMentionComponent';
+import MyCustomChart from 'components/MyCustomChartComponent';
+
+export function configureAssistantContext() {
+  providePageContext(/.*/, [
+    createAssistantContextItem('component', {
+      components: {
+        MyEntityMention,
+        MyCustomChart,
+      },
+      prompt: `
+        - When mentioning an entity in text, always use the your_app_MyEntityMention component: <your_app_MyEntityMention name={'entity name here'} type={'entity type here'} />
+        - For displaying charts, use the your_app_MyCustomChart component: <your_app_MyCustomChart data={chartData} title={'Chart Title'} />
+        - Custom components must never be wrapped in code blocks (backticks \` or \`\`\`).
+      `,
+      namespace: 'your_app', // Optional: defaults to 'components' if not provided
+    }),
+  ]);
+}
+```
+
+**Key Points for Component Context:**
+
+- **Approval Required**: ⚠️ Components must be approved by #grafana-assistant before usage
+- **Components**: A record of component names to their React component implementations
+- **Prompt**: Instructions for the assistant on how and when to use these components
+- **Namespace**: A unique identifier for your app's components (e.g., 'your_app', 'datasource'). Optional - defaults to 'components' if not provided
+- **Component Usage**: Components are referenced in assistant responses as `<namespace_ComponentName prop={'value'} />` (note the underscore format)
+- **No Code Blocks**: Custom components should never be wrapped in markdown code blocks
+
+**Example Component Implementation:**
+```typescript
+interface MyEntityMentionProps {
+  name: string;
+  type: string;
+  env?: string;
+  site?: string;
+  namespace?: string;
+  properties?: string;
+}
+
+const MyEntityMention: React.FC<MyEntityMentionProps> = ({ name, type, env, site, namespace, properties }) => {
+  return (
+    <span 
+      className="entity-mention" 
+      data-entity-type={type}
+      title={`${type}: ${name}`}
+    >
+      {name}
+    </span>
+  );
+};
+
+export default MyEntityMention;
+```
+
+### Using Hidden Context for System Instructions
+
+The `hidden` parameter allows you to provide context to the assistant without showing it in the UI pills. This is particularly useful for:
+
+- **System instructions**: Provide behavioral guidelines specific to certain pages
+- **Metadata**: Include technical details that might confuse users if shown
+- **Contextual rules**: Add page-specific rules without cluttering the interface
+
+Example use cases:
+
+```typescript
+// Provide exploration-specific guidelines
+providePageContext('/explore', [
+  createAssistantContextItem('structured', {
+    hidden: true,
+    title: 'Explore Page Guidelines',
+    data: {
+      instructions: [
+        'Always validate time ranges before running queries',
+        'Suggest using recording rules for expensive queries',
+        'Warn about queries that might impact performance'
+      ],
+      queryLimits: {
+        maxTimeRange: '24h',
+        suggestedSampleInterval: '1m'
+      }
+    }
+  })
+]);
+
+// Add dashboard-specific context
+providePageContext('/d/*', [
+  createAssistantContextItem('structured', {
+    hidden: true,
+    title: 'Dashboard Instructions',
+    data: {
+      bestPractices: 'Encourage users to use template variables for flexibility',
+      performance: 'Suggest panel caching for slow queries'
+    }
+  })
+]);
 ```
 
 ### Exposing Functions to the Assistant
@@ -263,6 +456,52 @@ export const getExtensionConfigs = () => [
 ];
 ```
 
+### Using the OpenAssistantButton Component
+
+The `OpenAssistantButton` is a pre-built Button component that provides an easy way to add assistant functionality to your UI with a single button click. It automatically checks availability and hides itself if the Assistant is not available.
+
+```typescript
+import { OpenAssistantButton, createAssistantContextItem } from '@grafana/assistant';
+
+function MyDashboard() {
+  const dashboardContext = createAssistantContextItem('dashboard', {
+    dashboardUid: 'dashboard-123',
+    dashboardTitle: 'CPU Metrics Dashboard'
+  });
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      
+      {/* Basic usage */}
+      <OpenAssistantButton
+        prompt="Help me analyze the CPU usage trends in this dashboard"
+        context={[dashboardContext]}
+        origin="grafana/dashboard-menu"
+      />
+      
+      {/* Icon-only button */}
+      <OpenAssistantButton
+        prompt="Show me optimization suggestions"
+        iconOnlyButton={true}
+        name="Get AI suggestions"
+        size="md"
+        origin="grafana-datasources/loki/query-editor"
+      />
+      
+      {/* Button without auto-send */}
+      <OpenAssistantButton
+        prompt="What patterns do you see in the data?"
+        autoSend={false}
+        name="Ask Assistant"
+        size="lg"
+        origin="grafana/panel-viewer"
+      />
+    </div>
+  );
+}
+```
+
 ## API Reference
 
 ### React Hooks
@@ -292,6 +531,47 @@ A React hook for providing page context that automatically cleans up on unmount.
 
 **Returns:** A setter function to update the context
 
+#### `usePageComponents(): Record<string, ComponentImplementation>`
+
+A React hook that provides all components available for the current page. This hook automatically updates when the URL changes or when component registrations change.
+
+**Returns:** Object containing all components available for the current page, keyed by `namespace_componentName` format.
+
+**Example:**
+```typescript
+import { usePageComponents } from '@grafana/assistant';
+
+function MyAssistantComponent() {
+  const components = usePageComponents();
+  
+  // Access components registered with namespace 'myapp' and component name 'EntityMention'
+  const EntityMentionComponent = components['myapp_EntityMention'];
+  
+  return (
+    <div>
+      Available components: {Object.keys(components).join(', ')}
+    </div>
+  );
+}
+```
+
+### React Components
+
+#### `<OpenAssistantButton />`
+
+A pre-built React component that renders a button to open the Grafana Assistant with configurable prompt and context.
+
+**Parameters:**
+- `prompt: string` - **Required** The initial prompt to display in the assistant
+- `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'
+- `context?: ChatContextItem[]` - Optional context items created with `createAssistantContextItem`
+- `autoSend?: boolean` - Whether to automatically send the initial prompt (defaults to `true`)
+- `title?: string` - Text to display on the button (defaults to `'Analyze with Assistant'`)
+- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Button size (defaults to `'sm'`)
+- `iconOnlyButton?: boolean` - If `true`, renders as an icon-only button with tooltip (defaults to `false`)
+
+**Returns:** JSX element or `null` if assistant is not available
+
 ### Availability Functions
 
 #### `isAssistantAvailable(): Observable<boolean>`
@@ -308,8 +588,10 @@ Opens the Grafana Assistant sidebar.
 
 **Parameters:**
 - `props: OpenAssistantProps` - Configuration object
+  - `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'
   - `prompt?: string` - Optional initial prompt to display in the assistant
   - `context?: ChatContextItem[]` - Optional context items to provide additional information to the assistant
+  - `autoSend?: boolean` - Optional flag to automatically send the initial prompt
 
 #### `closeAssistant(): void`
 
@@ -317,7 +599,7 @@ Closes the Grafana Assistant sidebar.
 
 ### Context Functions
 
-#### `createContext<T>(type: T, params: ContextTypeParams<T>): ChatContextItem`
+#### `createAssistantContextItem<T>(type: T, params: ContextTypeParams<T>): ChatContextItem`
 
 Creates a context item that can be passed to the assistant to provide additional information.
 
@@ -329,8 +611,10 @@ Creates a context item that can be passed to the assistant to provide additional
   - `'label_name'` - Label name context
   - `'label_value'` - Label value context
   - `'structured'` - Custom structured data context
+  - `'component'` - Custom React components context
   - `'unknown'` - Generic text context
-- `params` - Parameters specific to the context type (see Context Types section)
+- `params` - Parameters specific to the context type (see Context Types section). All context types support:
+  - `hidden?: boolean` - If true, the context item will not be shown in the UI pills but will still be sent to the assistant. This is useful for providing system instructions, behavioral guidelines, or other metadata that shouldn't clutter the user interface.
 
 **Returns:** A `ChatContextItem` that can be passed to `openAssistant`
 
@@ -362,6 +646,50 @@ setDashboardContext([...newContext]);
 setDashboardContext.unregister();
 ```
 
+#### `provideComponents(prompt: string, namespace: string, components: Record<string, ComponentImplementation>, urlPattern?: string | RegExp): ((context: ChatContextItem[]) => void) & { unregister: () => void }`
+
+A simplified function for providing components to the assistant. This is a convenience wrapper around `providePageContext` specifically for registering components.
+
+**Parameters:**
+- `prompt` - Instructions for the assistant on how and when to use these components
+- `namespace` - A unique identifier for your app's components (e.g., 'myapp', 'datasource')
+- `components` - A record of component names to their React component implementations
+- `urlPattern` - Optional URL pattern to match against page URLs (defaults to `/.*/` - matches all pages)
+
+**Returns:** A setter function to update the context, with an `unregister` method attached for cleanup
+
+**Example:**
+```typescript
+import { provideComponents } from '@grafana/assistant';
+import MyEntityMention from './components/MyEntityMention';
+import MyCustomChart from './components/MyCustomChart';
+
+// Register components for all pages
+const setComponents = provideComponents(
+  `
+  - When mentioning entities, use the myapp_MyEntityMention component: <myapp_MyEntityMention name={'entity-name'} type={'entity-type'} />
+  - For charts, use the myapp_MyCustomChart component: <myapp_MyCustomChart data={chartData} title={'Chart Title'} />
+  - Custom components must never be wrapped in code blocks.
+  `,
+  'myapp',
+  {
+    MyEntityMention,
+    MyCustomChart,
+  }
+);
+
+// Register components only for dashboard pages
+const setDashboardComponents = provideComponents(
+  'Use components to enhance dashboard analysis.',
+  'dashboard',
+  { MyEntityMention },
+  '/d/*'
+);
+
+// Cleanup when done
+setComponents.unregister();
+```
+
 ### Questions System
 
 The questions system allows external parties to provide sample prompts with optional context for specific pages. It reuses the existing page context infrastructure but presents a simpler interface focused on questions.
@@ -382,12 +710,12 @@ Registers questions for specific pages based on URL patterns. Returns a setter f
 const setQuestions = provideQuestions("/d/*", [
   {
     prompt: "What metrics are available in this dashboard?",
-    context: [], // Optional context items created with `createContext`
+    context: [], // Optional context items created with `createAssistantContextItem`
   },
   {
     prompt: "How can I optimize the queries in this dashboard?",
     context: [
-      createContext("dashboard", {
+      createAssistantContextItem("dashboard", {
         dashboardUid: 'dashboard-uid',
         dashboardTitle: 'System Overview',
         folderUid: 'folder-uid',
@@ -470,13 +798,15 @@ function AssistantComponent() {
 type OpenAssistantProps = {
   prompt?: string;
   context?: ChatContextItem[];
+  autoSend?: boolean;
 };
 ```
 
 Configuration object for opening the assistant.
 
 - `prompt` - Optional initial prompt to display
-- `context` - Optional context items to provide  
+- `context` - Optional context items to provide
+- `autoSend` - Optional flag to automatically send the initial prompt
 
 #### `ChatContextItem`
 
@@ -534,11 +864,10 @@ Represents a registered questions mapping.
 
 ```typescript
 interface CreateDatasourceContextParams {
-  datasourceName: string;
   datasourceUid: string;
-  datasourceType: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -552,6 +881,7 @@ interface CreateDashboardContextParams {
   folderTitle?: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -563,6 +893,7 @@ interface CreateFolderContextParams {
   folderTitle: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -575,6 +906,7 @@ interface CreateLabelNameContextParams {
   labelName: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -588,6 +920,7 @@ interface CreateLabelValueContextParams {
   labelValue: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -598,6 +931,20 @@ interface StructuredNodeDataParams {
   data: Record<string, any>;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
+}
+```
+
+#### Component Context Parameters
+
+```typescript
+interface CreateComponentContextParams {
+  components: Record<string, React.ComponentType<any>>;
+  prompt: string;
+  namespace?: string;  // Optional: defaults to 'components' if not provided
+  title?: string;
+  icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -609,6 +956,7 @@ interface NodeDataParams {
   text?: string;
   title?: string;
   icon?: IconName;
+  hidden?: boolean;  // If true, the context item will not be shown in the context pills
 }
 ```
 
@@ -689,11 +1037,13 @@ export type LabelNameNodeData;
 export type LabelValueNodeData;
 export type StructuredNodeData;
 export type TreeNode;
+export type ItemDataType;
 
-// Enums
-export enum ItemDataType;
+// Component types
+export type ComponentImplementation;
+export type NamedComponents;
 ```
 
 ## License
 
-Apache-2.0
+Apache-2.0

package/dist/components/OpenAssistantButton.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ChatContextItem } from '../context/types';
+import { OpenAssistantProps } from '../sidebar';
+export interface OpenAssistantButtonProps {
+    /** Prompt to pass to the openAssistant function. */
+    prompt: string;
+    /** Origin of the request that opened the assistant. This is used to track the source of the request. Should be a structured string using forward slashes, with the first part as a namespace. Examples: 'grafana-datasources/prometheus/query-builder', 'grafana-slo-app/slo-editor-overview', 'grafana/trace-view-analyzer`. */
+    origin: string;
+    /** Context to pass to the openAssistant function. Optional, defaults to undefined. Created with `createAssistantContextItem`. */
+    context?: ChatContextItem[];
+    /** Whether to automatically send the prompt. Optional, defaults to true. */
+    autoSend?: boolean;
+    /** Text to display on the button. Optional, defaults to 'Analyze with Assistant' */
+    title?: string;
+    /** Button size, defaults to sm */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** If true, the button will be Assistant icon only with name as title. Defaults to false. */
+    iconOnlyButton?: boolean;
+}
+/**
+ * A button component that opens the Grafana Assistant with configurable prompt and context.
+ */
+export declare function OpenAssistantButton(props: OpenAssistantButtonProps): React.JSX.Element | null;
+/**
+ * Presentational component separated from OpenAssistantButton to avoid hook dependencies in Storybook.
+ * It is not exported for users of the package.
+ */
+export declare function OpenAssistantButtonView({ prompt, origin, context, autoSend, title, size, iconOnlyButton, openAssistant, }: OpenAssistantButtonProps & {
+    openAssistant: (props: OpenAssistantProps) => void;
+}): React.JSX.Element;

package/dist/components/OpenAssistantButton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OpenAssistantButtonView } from './OpenAssistantButton';
+declare const meta: Meta<typeof OpenAssistantButtonView>;
+export default meta;
+type Story = StoryObj<typeof OpenAssistantButtonView>;
+export declare const Default: Story;
+export declare const IconOnly: Story;
+export declare const LargeButton: Story;
+export declare const CustomTitle: Story;

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { OpenAssistantButton, type OpenAssistantButtonProps } from './OpenAssistantButton';

package/dist/context/base.d.ts

@@ -2,6 +2,7 @@ import { IconName } from '@grafana/ui';
 import { type ContextItemData } from './types';
 export interface BaseParams {
     title?: string;
+    hidden?: boolean;
     img?: string;
     icon?: IconName;
 }
@@ -9,9 +10,6 @@ export interface NodeDataParams extends BaseParams {
     id: string;
     text?: string;
 }
-export interface StructuredNodeDataParams extends BaseParams {
-    data: Record<string, any>;
-}
 export declare class NodeData {
     params: NodeDataParams;
     id: string;
@@ -19,6 +17,9 @@ export declare class NodeData {
     constructor(params: NodeDataParams);
     formatForLLM(codeElementIds?: string[]): ContextItemData;
 }
+export interface StructuredNodeDataParams extends BaseParams {
+    data: Record<string, any>;
+}
 export declare class StructuredNodeData {
     params: StructuredNodeDataParams;
     id: string;

package/dist/context/chat.d.ts

@@ -1,22 +1,5 @@
-import { NodeDataParams, StructuredNodeDataParams } from './base';
-import { CreateDashboardContextParams, CreateFolderContextParams } from './dashboard';
-import { CreateDatasourceContextParams } from './datasource';
-import { CreateLabelNameContextParams, CreateLabelValueContextParams } from './label';
-import { ChatContextItem, ItemDataType } from './types';
-type ContextTypeMap = {
-    [ItemDataType.Datasource]: CreateDatasourceContextParams;
-    [ItemDataType.LabelName]: CreateLabelNameContextParams;
-    [ItemDataType.LabelValue]: CreateLabelValueContextParams;
-    [ItemDataType.Dashboard]: CreateDashboardContextParams;
-    [ItemDataType.DashboardFolder]: CreateFolderContextParams;
-    [ItemDataType.Structured]: StructuredNodeDataParams;
-    [ItemDataType.Unknown]: NodeDataParams;
-};
-/**
- * @deprecated This function is deprecated and will be removed in a future release because it collides with React's context naming.
- * Use createContextItem instead.
- */
-export declare function createContext<T extends keyof ContextTypeMap>(type: T, params: ContextTypeMap[T]): ChatContextItem;
+import { ContextTypeRegistry } from './factory';
+import { ChatContextItem } from './types';
 /**
  * Creates a new chat context item that can be added to conversations.
  *
@@ -40,16 +23,14 @@ export declare function createContext<T extends keyof ContextTypeMap>(type: T, p
  * // Create a context that will be passed into the function triggering an assistant open
  * openAssistant({
  *   ...
+ *   origin: 'my-feature',
  *   context: [
- *     createAssistantContext(ItemDataType.Datasource, {
+ *     createAssistantContextItem('datasource', {
  *       datasourceUid: datasource.uid,
- *       datasourceName: datasource.name,
- *       datasourceType: datasource.type,
  *       img: datasource.meta?.info?.logos?.small,
  *     }),
  *   ],
  * });
  * ```
  */
-export declare function createContextItem<T extends keyof ContextTypeMap>(type: T, params: ContextTypeMap[T]): ChatContextItem;
-export {};
+export declare function createAssistantContextItem<T extends keyof ContextTypeRegistry>(type: T, params: ContextTypeRegistry[T]['params']): ChatContextItem;

package/dist/context/component.d.ts

@@ -0,0 +1,38 @@
+import { ComponentType } from 'react';
+import { BaseParams, NodeData } from './base';
+import { type ContextItemData } from './types';
+export type ComponentImplementation = ComponentType<any>;
+export type NamedComponents = Record<string, ComponentImplementation>;
+/**
+ * Type used to create a component context item.
+ */
+export interface CreateComponentContextParams extends BaseParams {
+    components: Record<string, ComponentType<any>>;
+    prompt: string;
+    namespace?: string;
+}
+export declare class ComponentNodeData extends NodeData {
+    components: Record<string, ComponentType<any>>;
+    prompt: string;
+    namespace: string;
+    constructor(params: CreateComponentContextParams);
+    formatForLLM(codeElementIds?: string[]): ContextItemData;
+}
+/**
+ * React hook that provides all components available for the current page.
+ * This hook automatically updates when the URL changes or when component registrations change.
+ *
+ * @returns Object containing all components available for the current page, keyed by namespace.componentName
+ */
+export declare function usePageComponents(): Record<string, ComponentImplementation>;
+/**
+ * Provide components to the assistant.
+ *
+ * @param prompt - The prompt to use for the components.
+ * @param namespace - The namespace to use for the components.
+ * @param components - The components to provide.
+ * @param urlPattern - The URL pattern to match for the components.
+ */
+export declare function provideComponents(prompt: string, namespace: string, components: Record<string, ComponentImplementation>, urlPattern?: string | RegExp): ((context: import("./types").ChatContextItem[]) => void) & {
+    unregister: () => void;
+};

package/dist/context/dashboard.d.ts

@@ -15,7 +15,6 @@ export declare class DashboardNodeData extends NodeData {
     dashboardTitle: string;
     folderUid?: string;
     folderTitle?: string;
-    text: string;
     constructor(params: CreateDashboardContextParams);
     formatForLLM(codeElementIds?: string[]): ContextItemData;
 }

package/dist/context/datasource.d.ts

@@ -1,15 +1,19 @@
 import { BaseParams, NodeData } from './base';
+import { DatasourceMeta } from './factory';
 import { type ContextItemData } from './types';
+/**
+ * Type used to create a datasource context item.
+ *
+ * All required attributes will be inferred from the datasources uid.
+ */
 export interface CreateDatasourceContextParams extends BaseParams {
-    datasourceName: string;
     datasourceUid: string;
-    datasourceType: string;
 }
 export declare class DatasourceNodeData extends NodeData {
     datasourceUid: string;
     datasourceType: string;
     datasourceName: string;
-    text: string;
-    constructor(params: CreateDatasourceContextParams);
+    img?: string;
+    constructor(params: CreateDatasourceContextParams & DatasourceMeta);
     formatForLLM(codeElementIds?: string[]): ContextItemData;
 }

package/dist/context/factory.d.ts

@@ -1,39 +1,51 @@
 import { NodeData, NodeDataParams, StructuredNodeData, StructuredNodeDataParams } from './base';
+import { ComponentNodeData, type CreateComponentContextParams } from './component';
 import { DashboardNodeData, FolderNodeData, type CreateDashboardContextParams, type CreateFolderContextParams } from './dashboard';
 import { DatasourceNodeData, type CreateDatasourceContextParams } from './datasource';
 import { LabelNameNodeData, LabelValueNodeData, type CreateLabelNameContextParams, type CreateLabelValueContextParams } from './label';
-type ContextTypeMap = {
+/**
+ * registry to handle the type mappings between ItemData type, params and node data
+ */
+export type ContextTypeRegistry = {
     datasource: {
         params: CreateDatasourceContextParams;
-        return: DatasourceNodeData;
+        node: DatasourceNodeData;
     };
     label_name: {
         params: CreateLabelNameContextParams;
-        return: LabelNameNodeData;
+        node: LabelNameNodeData;
     };
     label_value: {
         params: CreateLabelValueContextParams;
-        return: LabelValueNodeData;
+        node: LabelValueNodeData;
     };
     dashboard: {
         params: CreateDashboardContextParams;
-        return: DashboardNodeData;
+        node: DashboardNodeData;
     };
     dashboard_folder: {
         params: CreateFolderContextParams;
-        return: FolderNodeData;
+        node: FolderNodeData;
     };
     structured: {
         params: StructuredNodeDataParams;
-        return: StructuredNodeData;
+        node: StructuredNodeData;
+    };
+    component: {
+        params: CreateComponentContextParams;
+        node: ComponentNodeData;
     };
     unknown: {
         params: NodeDataParams;
-        return: NodeData;
+        node: NodeData;
     };
 };
+export type DatasourceMeta = {
+    datasourceType: string;
+    datasourceName: string;
+    img?: string;
+};
 /**
  * Creates context nodes based on type with full type safety using generics
  */
-export declare function createContextByType<T extends keyof ContextTypeMap>(type: T, params: ContextTypeMap[T]['params']): ContextTypeMap[T]['return'];
-export {};
+export declare function createContextByType<T extends keyof ContextTypeRegistry>(type: T, params: ContextTypeRegistry[T]['params']): ContextTypeRegistry[T]['node'];

package/dist/context/index.d.ts

@@ -1,5 +1,6 @@
 export * from './base';
 export * from './chat';
+export * from './component';
 export * from './dashboard';
 export * from './datasource';
 export * from './factory';

package/dist/context/label.d.ts

@@ -1,8 +1,8 @@
 import { BaseParams, NodeData } from './base';
+import { DatasourceMeta } from './factory';
 import { type ContextItemData } from './types';
 export interface CreateLabelNameContextParams extends BaseParams {
     datasourceUid: string;
-    datasourceType: string;
     labelName: string;
 }
 export interface CreateLabelValueContextParams extends CreateLabelNameContextParams {
@@ -11,17 +11,19 @@ export interface CreateLabelValueContextParams extends CreateLabelNameContextPar
 export declare class LabelNameNodeData extends NodeData {
     datasourceUid: string;
     datasourceType: string;
+    datasourceName: string;
     labelName: string;
-    text: string;
-    constructor(params: CreateLabelNameContextParams);
+    img?: string;
+    constructor(params: CreateLabelNameContextParams & DatasourceMeta);
     formatForLLM(codeElementIds?: string[]): ContextItemData;
 }
 export declare class LabelValueNodeData extends NodeData {
     datasourceUid: string;
     datasourceType: string;
+    datasourceName: string;
     labelName: string;
     labelValue: string;
-    text: string;
-    constructor(params: CreateLabelValueContextParams);
+    img?: string;
+    constructor(params: CreateLabelValueContextParams & DatasourceMeta);
     formatForLLM(codeElementIds?: string[]): ContextItemData;
 }

package/dist/context/page.d.ts

@@ -28,4 +28,5 @@ export declare function providePageContext(urlPattern: string | RegExp, initialC
 export declare function useProvidePageContext(urlPattern: string | RegExp, initialContext?: ChatContextItem[]): (context: ChatContextItem[]) => void;
 export declare function usePageContext(options?: {
     allowQuestions: boolean;
+    allowComponents: boolean;
 }): ChatContextItem[];

package/dist/context/types.d.ts

@@ -1,19 +1,12 @@
 import { IconName } from '@grafana/ui';
+import { ComponentType } from 'react';
 export interface BaseItemData {
     name: string;
     text: string;
 }
 export interface UnknownItemData extends BaseItemData {
 }
-export declare enum ItemDataType {
-    Unknown = "unknown",
-    Datasource = "datasource",
-    LabelName = "label_name",
-    LabelValue = "label_value",
-    Dashboard = "dashboard",
-    DashboardFolder = "dashboard_folder",
-    Structured = "structured"
-}
+export type ItemDataType = 'unknown' | 'datasource' | 'label_name' | 'label_value' | 'dashboard' | 'dashboard_folder' | 'structured' | 'component';
 export interface ContextItemData {
     type: ItemDataType;
     codeElementIds?: string[];
@@ -33,11 +26,14 @@ export interface TreeNode {
 export interface DatasourceItemData extends BaseItemData {
     uid: string;
     type: string;
+    img?: string;
 }
 export interface LabelNameItemData extends BaseItemData {
     datasourceUid: string;
     datasourceType: string;
+    datasourceName: string;
     labelName: string;
+    img?: string;
 }
 export interface LabelValueItemData extends LabelNameItemData {
     labelValue: string;
@@ -52,6 +48,11 @@ export interface FolderItemData extends BaseItemData {
     folderUid: string;
     folderTitle: string;
 }
+export interface ComponentItemData extends BaseItemData {
+    components: Record<string, ComponentType<any>>;
+    prompt: string;
+    namespace: string;
+}
 export interface ChatContextItem {
     node: TreeNode;
     occurrences: string[];

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { createContext, createContextItem, ChatContextItem, DashboardNodeData, DatasourceNodeData, FolderNodeData, ItemDataType, LabelNameNodeData, LabelValueNodeData, StructuredNodeData, TreeNode, providePageContext, useProvidePageContext, PageContextRegistration, usePageContext, provideQuestions, useProvideQuestions, useQuestions, Question, QuestionRegistration, } from './context/index';
+export { createAssistantContextItem, ChatContextItem, ComponentNodeData, DashboardNodeData, DatasourceNodeData, FolderNodeData, ItemDataType, LabelNameNodeData, LabelValueNodeData, StructuredNodeData, TreeNode, providePageContext, useProvidePageContext, PageContextRegistration, usePageContext, provideQuestions, useProvideQuestions, useQuestions, Question, QuestionRegistration, usePageComponents, provideComponents, ComponentImplementation, NamedComponents, } from './context/index';
 export * from './functions';
 export * from './hook';
 export * from './plugin';
 export * from './sidebar';
+export * from './components';

package/dist/index.js

@@ -1 +1 @@
-(()=>{"use strict";var e,t={d:(e,a)=>{for(var n in a)t.o(a,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:a[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},a={};function n(e){let t=5381;for(let a=0;a<e.length;a++)t=(t<<5)+t+e.charCodeAt(a);return(t>>>0).toString(16)}t.r(a),t.d(a,{CALLBACK_EXTENSION_POINT:()=>C,DashboardNodeData:()=>o,DatasourceNodeData:()=>d,FolderNodeData:()=>i,ItemDataType:()=>e,LabelNameNodeData:()=>l,LabelValueNodeData:()=>u,StructuredNodeData:()=>r,closeAssistant:()=>M,createContext:()=>f,createContextItem:()=>h,getExposeAssistantFunctionsConfig:()=>F,isAssistantAvailable:()=>V,newFunctionNamespace:()=>A,openAssistant:()=>k,providePageContext:()=>y,provideQuestions:()=>D,useAssistant:()=>R,usePageContext:()=>N,useProvidePageContext:()=>T,useProvideQuestions:()=>S,useQuestions:()=>I}),function(e){e.Unknown="unknown",e.Datasource="datasource",e.LabelName="label_name",e.LabelValue="label_value",e.Dashboard="dashboard",e.DashboardFolder="dashboard_folder",e.Structured="structured"}(e||(e={}));class s{constructor(e){this.params=e,this.text="",this.id=n(e.id)}formatForLLM(t){var a,n;return{type:e.Unknown,codeElementIds:t,data:{name:null!==(a=this.params.text)&&void 0!==a?a:"",text:null!==(n=this.params.text)&&void 0!==n?n:""}}}}class r{constructor(e){this.params=e,this.id=n(JSON.stringify(e.data))}formatForLLM(t){return{type:e.Structured,codeElementIds:t,data:this.params.data}}}class o extends s{constructor(e){super({...e,id:e.dashboardUid}),this.text="",this.dashboardUid=e.dashboardUid,this.dashboardTitle=e.dashboardTitle,this.folderUid=e.folderUid,this.folderTitle=e.folderTitle,this.text=e.dashboardTitle}formatForLLM(t){return{type:e.Dashboard,codeElementIds:t,data:{name:this.dashboardTitle,dashboardUid:this.dashboardUid,dashboardTitle:this.dashboardTitle,folderUid:this.folderUid,folderTitle:this.folderTitle,text:this.text}}}}class i extends s{constructor(e){super({...e,id:e.folderUid}),this.text="",this.folderUid=e.folderUid,this.folderTitle=e.folderTitle,this.text=e.folderTitle}formatForLLM(t){return{type:e.DashboardFolder,codeElementIds:t,data:{name:this.folderTitle,folderUid:this.folderUid,folderTitle:this.folderTitle,text:this.text}}}}class d extends s{constructor(e){super({...e,id:e.datasourceUid}),this.text="",this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.datasourceName=e.datasourceName,this.text=e.datasourceName}formatForLLM(t){return{type:e.Datasource,codeElementIds:t,data:{name:this.datasourceName,uid:this.datasourceUid,type:this.datasourceType,text:this.text}}}}class l extends s{constructor(e){super({...e,id:`${e.datasourceUid}-${e.labelName}`}),this.text="",this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.labelName=e.labelName,this.text=e.labelName}formatForLLM(t){return{type:e.LabelName,codeElementIds:t,data:{name:this.labelName,datasourceUid:this.datasourceUid,datasourceType:this.datasourceType,labelName:this.labelName,text:this.text}}}}class u extends s{constructor(e){super({...e,id:`${e.datasourceUid}-${e.labelName}-${e.labelValue}`}),this.text="",this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.labelName=e.labelName,this.labelValue=e.labelValue,this.text=e.labelValue}formatForLLM(t){return{type:e.LabelValue,codeElementIds:t,data:{name:this.labelValue,datasourceUid:this.datasourceUid,datasourceType:this.datasourceType,labelName:this.labelName,labelValue:this.labelValue,text:this.text}}}}const c={[e.Datasource]:"database",[e.LabelName]:"database",[e.LabelValue]:"database",[e.Dashboard]:"dashboard",[e.DashboardFolder]:"folder",[e.Unknown]:"circle-mono",[e.Structured]:"gf-grid"};function p(t,a){return t===e.Datasource?a.datasourceName:t===e.LabelName?a.labelName:t===e.LabelValue?a.labelValue:t===e.Dashboard?a.dashboardTitle:t===e.DashboardFolder?a.folderTitle:t===e.Structured?a.data.name:"Given Context"}function f(e,t){var a,n;const f=function(e,t){switch(e){case"datasource":return new d(t);case"label_name":return new l(t);case"label_value":return new u(t);case"dashboard":return new o(t);case"dashboard_folder":return new i(t);case"structured":return new r(t);case"unknown":return new s(t);default:return console.error(`Unknown context type: ${e}`),new s(t)}}(e,t);return{node:{id:f.id,name:null!==(a=t.title)&&void 0!==a?a:p(e,t),img:t.img,icon:null!==(n=t.icon)&&void 0!==n?n:c[e],navigable:!1,selectable:!0,data:f},occurrences:[]}}function h(e,t){return f(e,t)}const m=require("@grafana/runtime"),b=require("react"),v=[],x="grafana-assistant:page-context-sync",g="grafana-assistant:page-context-update",w="grafana-assistant:page-context-remove",E="grafana-assistant:location-changed";let L=!1;function y(e,t){const a=v.findIndex((t=>{return a=t.urlPattern,n=e,"string"==typeof a&&"string"==typeof n?a===n:a instanceof RegExp&&n instanceof RegExp&&a.source===n.source&&a.flags===n.flags;var a,n}));let n;-1!==a?(n=v[a],n.context=[...t]):(n={id:`page-context-${Date.now()}-${Math.random().toString(36).slice(2,11)}`,urlPattern:e,context:[...t]},v.push(n)),window.dispatchEvent(new CustomEvent(g,{detail:n})),window.dispatchEvent(new CustomEvent(x,{detail:{registry:v}}));const s=e=>{const t=v.findIndex((e=>e.id===n.id));-1!==t&&(v[t].context=[...e],window.dispatchEvent(new CustomEvent(g,{detail:v[t]})))};return s.unregister=()=>{const e=v.findIndex((e=>e.id===n.id));-1!==e&&(v.splice(e,1),window.dispatchEvent(new CustomEvent(w,{detail:{id:n.id}})))},s}function T(e,t=[]){const a=(0,b.useRef)(void 0),n=(0,b.useRef)(t);return n.current=t,(0,b.useEffect)((()=>(a.current=y(e,n.current),()=>{var e;null===(e=a.current)||void 0===e||e.unregister()})),[e]),(0,b.useEffect)((()=>{a.current&&a.current(t)}),[t]),(0,b.useCallback)((e=>{var t;null===(t=a.current)||void 0===t||t.call(a,e)}),[])}function N(e={allowQuestions:!1}){const[t,a]=(0,b.useState)([]),n=(0,m.useLocationService)(),s=(0,b.useRef)("");return(0,b.useEffect)((()=>{const e=()=>{const e=function(e,t){if(!e)return[];const a=[];for(const n of t)U(e,n.urlPattern)&&a.push(...n.context);return a}(n.getLocation().pathname,v);a(e)},t=()=>{e()},r=t=>{var a;const s=null===(a=t.detail)||void 0===a?void 0:a.pathname;s&&s===n.getLocation().pathname&&e()},o=n.getLocationObservable().subscribe((t=>{const a=t.pathname;a!==s.current&&(s.current=a,function(e){window.dispatchEvent(new CustomEvent(E,{detail:{pathname:e}}))}(a),e())}));return e(),window.addEventListener(x,t),window.addEventListener(g,t),window.addEventListener(w,t),window.addEventListener(E,r),()=>{o.unsubscribe(),window.removeEventListener(x,t),window.removeEventListener(g,t),window.removeEventListener(w,t),window.removeEventListener(E,r)}}),[n]),e.allowQuestions?t:t.filter((e=>{var t;return"question"!==(null===(t=e.node.data)||void 0===t?void 0:t.type)}))}function U(e,t){if(t instanceof RegExp)return t.test(e);if("string"==typeof t){const a=t.replace(/\*\*/g,"\0DOUBLE_STAR\0").replace(/\*/g,"[^/]*").replace(/\u0000DOUBLE_STAR\u0000/g,".*").replace(/\?/g,".");return new RegExp(`^${a}$`).test(e)}return!1}function D(e,t){const a=e=>e.map(((e,t)=>({node:{id:`question-${t}`,name:e.prompt,navigable:!1,selectable:!0,icon:"question-circle",data:{type:"question",prompt:e.prompt,context:e.context||[]}},occurrences:[]}))),n=y(e,a(t)),s=e=>{n(a(e))};return s.unregister=n.unregister,s}function S(e,t=[]){const a=e=>e.map(((e,t)=>({node:{id:`question-${t}`,name:e.prompt,navigable:!1,selectable:!0,icon:"question-circle",data:{type:"question",prompt:e.prompt,context:e.context||[]}},occurrences:[]}))),n=T(e,a(t));return e=>{n(a(e))}}function I(){const e=N({allowQuestions:!0});return P(e)}L||(window.addEventListener(x,(e=>{var t;const a=null===(t=e.detail)||void 0===t?void 0:t.registry;if(a){const e=new Set(v.map((e=>e.id))),t=a.filter((t=>!e.has(t.id)));v.push(...t)}})),window.addEventListener(g,(e=>{const t=e.detail;if(t){const e=v.findIndex((e=>e.id===t.id));-1!==e?v[e]=t:v.push(t)}})),window.addEventListener(w,(e=>{var t;const a=null===(t=e.detail)||void 0===t?void 0:t.id;if(a){const e=v.findIndex((e=>e.id===a));-1!==e&&v.splice(e,1)}})),L=!0);const P=e=>e.filter((e=>{var t;return"question"===(null===(t=e.node.data)||void 0===t?void 0:t.type)})).map((e=>{var t,a;return{prompt:(null===(t=e.node.data)||void 0===t?void 0:t.prompt)||e.node.name,context:(null===(a=e.node.data)||void 0===a?void 0:a.context)||[]}})),C="grafana-assistant-app/callback/v0-alpha";function A(e,t){return{namespace:e,functions:t}}function F(e){return{title:"callback",targets:[C],fn:()=>e.map((e=>({namespace:e.namespace,functions:e.functions})))}}const O=require("rxjs");function V(){if(!m.getObservablePluginLinks)return(0,O.of)(!1);return(0,m.getObservablePluginLinks)({extensionPointId:"grafana/extension-sidebar/v0-alpha"}).pipe((0,O.map)((e=>e.some((e=>"grafana-assistant-app"===e.pluginId&&"Grafana Assistant"===e.title)))))}const q=require("@grafana/data");class $ extends q.BusEventWithPayload{}$.type="open-extension-sidebar";class _ extends q.BusEventBase{}function k(e){!function(e,t,a){const n=new $({pluginId:"grafana-assistant-app",componentTitle:"Grafana Assistant",props:a});(0,m.getAppEvents)().publish(n)}(0,0,{initialPrompt:e.prompt,initialContext:e.context})}function M(){!function(){const e=new _;(0,m.getAppEvents)().publish(e)}()}function R(){const[e,t]=(0,b.useState)(!1);return(0,b.useEffect)((()=>{const e=V().subscribe((e=>t(e)));return()=>{e.unsubscribe()}}),[]),[e,e?k:void 0,e?M:void 0]}_.type="close-extension-sidebar",module.exports=a})();
+(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){let t=5381;for(let n=0;n<e.length;n++)t=(t<<5)+t+e.charCodeAt(n);return(t>>>0).toString(16)}e.r(t),e.d(t,{CALLBACK_EXTENSION_POINT:()=>I,ComponentNodeData:()=>b,DashboardNodeData:()=>x,DatasourceNodeData:()=>E,FolderNodeData:()=>k,LabelNameNodeData:()=>C,LabelValueNodeData:()=>A,OpenAssistantButton:()=>ut,StructuredNodeData:()=>r,closeAssistant:()=>z,createAssistantContextItem:()=>N,getExposeAssistantFunctionsConfig:()=>P,isAssistantAvailable:()=>j,newFunctionNamespace:()=>O,openAssistant:()=>F,provideComponents:()=>w,providePageContext:()=>h,provideQuestions:()=>L,useAssistant:()=>G,usePageComponents:()=>y,usePageContext:()=>v,useProvidePageContext:()=>m,useProvideQuestions:()=>T,useQuestions:()=>_});class a{constructor(e){this.params=e,this.text="",this.id=n(e.id)}formatForLLM(e){var t,n;return{type:"unknown",codeElementIds:e,data:{name:null!==(t=this.params.text)&&void 0!==t?t:"",text:null!==(n=this.params.text)&&void 0!==n?n:""}}}}class r{constructor(e){this.params=e,this.id=n(JSON.stringify(e.data))}formatForLLM(e){return{type:"structured",codeElementIds:e,data:this.params.data}}}const s=require("@grafana/runtime"),o=require("react");var i=e.n(o);const c=[],u="grafana-assistant:page-context-sync",l="grafana-assistant:page-context-update",d="grafana-assistant:page-context-remove",f="grafana-assistant:location-changed";let p=!1;function h(e,t){const n=c.findIndex((t=>{return n=t.urlPattern,a=e,"string"==typeof n&&"string"==typeof a?n===a:n instanceof RegExp&&a instanceof RegExp&&n.source===a.source&&n.flags===a.flags;var n,a}));let a;-1!==n?(a=c[n],a.context=[...t]):(a={id:`page-context-${Date.now()}-${Math.random().toString(36).slice(2,11)}`,urlPattern:e,context:[...t]},c.push(a)),window.dispatchEvent(new CustomEvent(l,{detail:a})),window.dispatchEvent(new CustomEvent(u,{detail:{registry:c}}));const r=e=>{const t=c.findIndex((e=>e.id===a.id));-1!==t&&(c[t].context=[...e],window.dispatchEvent(new CustomEvent(l,{detail:c[t]})))};return r.unregister=()=>{const e=c.findIndex((e=>e.id===a.id));-1!==e&&(c.splice(e,1),window.dispatchEvent(new CustomEvent(d,{detail:{id:a.id}})))},r}function m(e,t=[]){const n=(0,o.useRef)(void 0),a=(0,o.useRef)(t);return a.current=t,(0,o.useEffect)((()=>(n.current=h(e,a.current),()=>{var e;null===(e=n.current)||void 0===e||e.unregister()})),[e]),(0,o.useEffect)((()=>{n.current&&n.current(t)}),[t]),(0,o.useCallback)((e=>{var t;null===(t=n.current)||void 0===t||t.call(n,e)}),[])}function v(e={allowQuestions:!1,allowComponents:!1}){const[t,n]=(0,o.useState)([]),a=(0,s.useLocationService)(),r=(0,o.useRef)("");(0,o.useEffect)((()=>{const e=()=>{const e=function(e,t){if(!e)return[];const n=[];for(const a of t)g(e,a.urlPattern)&&n.push(...a.context);return n}(a.getLocation().pathname,c);n(e)},t=()=>{e()},s=t=>{var n;const r=null===(n=t.detail)||void 0===n?void 0:n.pathname;r&&r===a.getLocation().pathname&&e()},o=a.getLocationObservable().subscribe((t=>{const n=t.pathname;n!==r.current&&(r.current=n,function(e){window.dispatchEvent(new CustomEvent(f,{detail:{pathname:e}}))}(n),e())}));return e(),window.addEventListener(u,t),window.addEventListener(l,t),window.addEventListener(d,t),window.addEventListener(f,s),()=>{o.unsubscribe(),window.removeEventListener(u,t),window.removeEventListener(l,t),window.removeEventListener(d,t),window.removeEventListener(f,s)}}),[a]);let i=t;return e.allowQuestions||(i=i.filter((e=>{var t;return"question"!==(null===(t=e.node.data)||void 0===t?void 0:t.type)}))),e.allowComponents||(i=i.filter((e=>{var t;return"component"!==(null===(t=e.node.data)||void 0===t?void 0:t.type)}))),i}function g(e,t){if(t instanceof RegExp)return t.test(e);if("string"==typeof t){const n=t.replace(/\*\*/g,"\0DOUBLE_STAR\0").replace(/\*/g,"[^/]*").replace(/\u0000DOUBLE_STAR\u0000/g,".*").replace(/\?/g,".");return new RegExp(`^${n}$`).test(e)}return!1}p||(window.addEventListener(u,(e=>{var t;const n=null===(t=e.detail)||void 0===t?void 0:t.registry;if(n){const e=new Set(c.map((e=>e.id))),t=n.filter((t=>!e.has(t.id)));c.push(...t)}})),window.addEventListener(l,(e=>{const t=e.detail;if(t){const e=c.findIndex((e=>e.id===t.id));-1!==e?c[e]=t:c.push(t)}})),window.addEventListener(d,(e=>{var t;const n=null===(t=e.detail)||void 0===t?void 0:t.id;if(n){const e=c.findIndex((e=>e.id===n));-1!==e&&c.splice(e,1)}})),p=!0);class b extends a{constructor(e){const t=e.namespace||"components";super({...e,id:`${t}-${Object.keys(e.components).join("-")}`}),this.components=e.components,this.prompt=e.prompt,this.namespace=t}formatForLLM(e){return{type:"component",codeElementIds:e,data:{name:`${this.namespace} components`,prompt:this.prompt,namespace:this.namespace}}}}function y(){const e=v({allowComponents:!0,allowQuestions:!1});return(0,o.useMemo)((()=>{const t={};return e.filter((e=>{var t;return null===(t=e.node.data)||void 0===t?void 0:t.components})).forEach((e=>{const n=e.node.data;if(null==n?void 0:n.components){const e=n.namespace||n.name||"components";Object.entries(n.components).forEach((([n,a])=>{t[`${e}_${n}`]=a}))}})),t}),[e])}function w(e,t,n,a=/.*/){return h(a,[N("component",{components:n,prompt:e,namespace:t})])}class x extends a{constructor(e){super({...e,id:e.dashboardUid}),this.dashboardUid=e.dashboardUid,this.dashboardTitle=e.dashboardTitle,this.folderUid=e.folderUid,this.folderTitle=e.folderTitle,this.text=e.dashboardTitle}formatForLLM(e){return{type:"dashboard",codeElementIds:e,data:{name:this.dashboardTitle,dashboardUid:this.dashboardUid,dashboardTitle:this.dashboardTitle,folderUid:this.folderUid,folderTitle:this.folderTitle,text:this.text}}}}class k extends a{constructor(e){super({...e,id:e.folderUid}),this.text="",this.folderUid=e.folderUid,this.folderTitle=e.folderTitle,this.text=e.folderTitle}formatForLLM(e){return{type:"dashboard_folder",codeElementIds:e,data:{name:this.folderTitle,folderUid:this.folderUid,folderTitle:this.folderTitle,text:this.text}}}}class E extends a{constructor(e){super({...e,id:e.datasourceUid}),this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.datasourceName=e.datasourceName,this.img=e.img,this.text=e.datasourceName}formatForLLM(e){return{type:"datasource",codeElementIds:e,data:{name:this.datasourceName,uid:this.datasourceUid,type:this.datasourceType,text:this.text,img:this.img}}}}class C extends a{constructor(e){super({...e,id:`${e.datasourceUid}-${e.labelName}`}),this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.datasourceName=e.datasourceName,this.labelName=e.labelName,this.text=e.labelName,this.img=e.img}formatForLLM(e){return{type:"label_name",codeElementIds:e,data:{name:this.labelName,datasourceUid:this.datasourceUid,datasourceType:this.datasourceType,datasourceName:this.datasourceName,labelName:this.labelName,img:this.img,text:this.text}}}}class A extends a{constructor(e){super({...e,id:`${e.datasourceUid}-${e.labelName}-${e.labelValue}`}),this.datasourceUid=e.datasourceUid,this.datasourceType=e.datasourceType,this.datasourceName=e.datasourceName,this.labelName=e.labelName,this.labelValue=e.labelValue,this.text=e.labelValue,this.img=e.img}formatForLLM(e){return{type:"label_value",codeElementIds:e,data:{name:this.labelValue,datasourceUid:this.datasourceUid,datasourceType:this.datasourceType,datasourceName:this.datasourceName,labelName:this.labelName,labelValue:this.labelValue,text:this.text,img:this.img}}}}function $(e){var t,n,a,r,o;const i=(0,s.getDataSourceSrv)().getInstanceSettings(e);return{datasourceType:null!==(t=null==i?void 0:i.type)&&void 0!==t?t:"unknown",datasourceName:null!==(n=null==i?void 0:i.name)&&void 0!==n?n:e,img:null===(o=null===(r=null===(a=null==i?void 0:i.meta)||void 0===a?void 0:a.info)||void 0===r?void 0:r.logos)||void 0===o?void 0:o.small}}const S={datasource:"database",label_name:"database",label_value:"database",dashboard:"dashboard",dashboard_folder:"folder",unknown:"circle-mono",structured:"gf-grid",component:"gf-grid"};function N(e,t){var n,s,o;const i=function(e,t){switch(e){case"datasource":return new E({...t,...$(t.datasourceUid)});case"label_name":return new C({...t,...$(t.datasourceUid)});case"label_value":return new A({...t,...$(t.datasourceUid)});case"dashboard":return new x(t);case"dashboard_folder":return new k(t);case"structured":return new r(t);case"component":return new b({...t,hidden:!0});case"unknown":return new a(t);default:return console.error(`Unknown context type: ${e}`),new a(t)}}(e,t),c=null!==(n=t.title)&&void 0!==n?n:function(e){var t;return e instanceof r?e.formatForLLM().data.name:null!==(t=e.text)&&void 0!==t?t:"Given Context"}(i),u=null!==(s=t.img)&&void 0!==s?s:function(e){if("img"in e)return e.img}(i);return{node:{id:i.id,name:c,img:u,icon:null!==(o=t.icon)&&void 0!==o?o:S[e],navigable:!1,selectable:!0,data:i},occurrences:[]}}function L(e,t){const n=e=>e.map(((e,t)=>({node:{id:`question-${t}`,name:e.prompt,navigable:!1,selectable:!0,icon:"question-circle",data:{type:"question",prompt:e.prompt,context:e.context||[]}},occurrences:[]}))),a=h(e,n(t)),r=e=>{a(n(e))};return r.unregister=a.unregister,r}function T(e,t=[]){const n=e=>e.map(((e,t)=>({node:{id:`question-${t}`,name:e.prompt,navigable:!1,selectable:!0,icon:"question-circle",data:{type:"question",prompt:e.prompt,context:e.context||[]}},occurrences:[]}))),a=m(e,n(t));return e=>{a(n(e))}}function _(){const e=v({allowQuestions:!0,allowComponents:!1});return U(e)}const U=e=>e.filter((e=>{var t;return"question"===(null===(t=e.node.data)||void 0===t?void 0:t.type)})).map((e=>{var t,n;return{prompt:(null===(t=e.node.data)||void 0===t?void 0:t.prompt)||e.node.name,context:(null===(n=e.node.data)||void 0===n?void 0:n.context)||[]}})),I="grafana-assistant-app/callback/v0-alpha";function O(e,t){return{namespace:e,functions:t}}function P(e){return{title:"callback",targets:[I],fn:()=>e.map((e=>({namespace:e.namespace,functions:e.functions})))}}const R=require("rxjs");function j(){if(!s.getObservablePluginLinks)return(0,R.of)(!1);return(0,s.getObservablePluginLinks)({extensionPointId:"grafana/extension-sidebar/v0-alpha"}).pipe((0,R.map)((e=>e.some((e=>"grafana-assistant-app"===e.pluginId&&"Grafana Assistant"===e.title)))))}const M=require("@grafana/data");class q extends M.BusEventWithPayload{}q.type="open-extension-sidebar";class D extends M.BusEventBase{}function F(e){var t,n;(0,s.reportInteraction)("grafana_assistant_app_opened_sidebar",{from:e.origin,prompt:null!==(t=e.prompt)&&void 0!==t?t:""}),function(e,t,n){const a=new q({pluginId:"grafana-assistant-app",componentTitle:"Grafana Assistant",props:n});(0,s.getAppEvents)().publish(a)}(0,0,{initialPrompt:e.prompt,initialContext:e.context,initialAutoSend:null===(n=e.autoSend)||void 0===n||n})}function z(){!function(){const e=new D;(0,s.getAppEvents)().publish(e)}()}function G(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{const e=j().subscribe((e=>t(e)));return()=>{e.unsubscribe()}}),[]),[e,e?F:void 0,e?z:void 0]}D.type="close-extension-sidebar";const B=require("@grafana/ui");var V=function(){function e(e){var t=this;this._insertTag=function(e){var n;n=0===t.tags.length?t.insertionPoint?t.insertionPoint.nextSibling:t.prepend?t.container.firstChild:t.before:t.tags[t.tags.length-1].nextSibling,t.container.insertBefore(e,n),t.tags.push(e)},this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container,this.prepend=e.prepend,this.insertionPoint=e.insertionPoint,this.before=null}var t=e.prototype;return t.hydrate=function(e){e.forEach(this._insertTag)},t.insert=function(e){this.ctr%(this.isSpeedy?65e3:1)==0&&this._insertTag(function(e){var t=document.createElement("style");return t.setAttribute("data-emotion",e.key),void 0!==e.nonce&&t.setAttribute("nonce",e.nonce),t.appendChild(document.createTextNode("")),t.setAttribute("data-s",""),t}(this));var t=this.tags[this.tags.length-1];if(this.isSpeedy){var n=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(t);try{n.insertRule(e,n.cssRules.length)}catch(e){}}else t.appendChild(document.createTextNode(e));this.ctr++},t.flush=function(){this.tags.forEach((function(e){var t;return null==(t=e.parentNode)?void 0:t.removeChild(e)})),this.tags=[],this.ctr=0},e}(),Q=Math.abs,W=String.fromCharCode,H=Object.assign;function J(e){return e.trim()}function K(e,t,n){return e.replace(t,n)}function X(e,t){return e.indexOf(t)}function Z(e,t){return 0|e.charCodeAt(t)}function Y(e,t,n){return e.slice(t,n)}function ee(e){return e.length}function te(e){return e.length}function ne(e,t){return t.push(e),e}var ae=1,re=1,se=0,oe=0,ie=0,ce="";function ue(e,t,n,a,r,s,o){return{value:e,root:t,parent:n,type:a,props:r,children:s,line:ae,column:re,length:o,return:""}}function le(e,t){return H(ue("",null,null,"",null,null,0),e,{length:-e.length},t)}function de(){return ie=oe>0?Z(ce,--oe):0,re--,10===ie&&(re=1,ae--),ie}function fe(){return ie=oe<se?Z(ce,oe++):0,re++,10===ie&&(re=1,ae++),ie}function pe(){return Z(ce,oe)}function he(){return oe}function me(e,t){return Y(ce,e,t)}function ve(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function ge(e){return ae=re=1,se=ee(ce=e),oe=0,[]}function be(e){return ce="",e}function ye(e){return J(me(oe-1,ke(91===e?e+2:40===e?e+1:e)))}function we(e){for(;(ie=pe())&&ie<33;)fe();return ve(e)>2||ve(ie)>3?"":" "}function xe(e,t){for(;--t&&fe()&&!(ie<48||ie>102||ie>57&&ie<65||ie>70&&ie<97););return me(e,he()+(t<6&&32==pe()&&32==fe()))}function ke(e){for(;fe();)switch(ie){case e:return oe;case 34:case 39:34!==e&&39!==e&&ke(ie);break;case 40:41===e&&ke(e);break;case 92:fe()}return oe}function Ee(e,t){for(;fe()&&e+ie!==57&&(e+ie!==84||47!==pe()););return"/*"+me(t,oe-1)+"*"+W(47===e?e:fe())}function Ce(e){for(;!ve(pe());)fe();return me(e,oe)}var Ae="-ms-",$e="-moz-",Se="-webkit-",Ne="comm",Le="rule",Te="decl",_e="@keyframes";function Ue(e,t){for(var n="",a=te(e),r=0;r<a;r++)n+=t(e[r],r,e,t)||"";return n}function Ie(e,t,n,a){switch(e.type){case"@layer":if(e.children.length)break;case"@import":case Te:return e.return=e.return||e.value;case Ne:return"";case _e:return e.return=e.value+"{"+Ue(e.children,a)+"}";case Le:e.value=e.props.join(",")}return ee(n=Ue(e.children,a))?e.return=e.value+"{"+n+"}":""}function Oe(e){return be(Pe("",null,null,null,[""],e=ge(e),0,[0],e))}function Pe(e,t,n,a,r,s,o,i,c){for(var u=0,l=0,d=o,f=0,p=0,h=0,m=1,v=1,g=1,b=0,y="",w=r,x=s,k=a,E=y;v;)switch(h=b,b=fe()){case 40:if(108!=h&&58==Z(E,d-1)){-1!=X(E+=K(ye(b),"&","&\f"),"&\f")&&(g=-1);break}case 34:case 39:case 91:E+=ye(b);break;case 9:case 10:case 13:case 32:E+=we(h);break;case 92:E+=xe(he()-1,7);continue;case 47:switch(pe()){case 42:case 47:ne(je(Ee(fe(),he()),t,n),c);break;default:E+="/"}break;case 123*m:i[u++]=ee(E)*g;case 125*m:case 59:case 0:switch(b){case 0:case 125:v=0;case 59+l:-1==g&&(E=K(E,/\f/g,"")),p>0&&ee(E)-d&&ne(p>32?Me(E+";",a,n,d-1):Me(K(E," ","")+";",a,n,d-2),c);break;case 59:E+=";";default:if(ne(k=Re(E,t,n,u,l,r,i,y,w=[],x=[],d),s),123===b)if(0===l)Pe(E,t,k,k,w,s,d,i,x);else switch(99===f&&110===Z(E,3)?100:f){case 100:case 108:case 109:case 115:Pe(e,k,k,a&&ne(Re(e,k,k,0,0,r,i,y,r,w=[],d),x),r,x,d,i,a?w:x);break;default:Pe(E,k,k,k,[""],x,0,i,x)}}u=l=p=0,m=g=1,y=E="",d=o;break;case 58:d=1+ee(E),p=h;default:if(m<1)if(123==b)--m;else if(125==b&&0==m++&&125==de())continue;switch(E+=W(b),b*m){case 38:g=l>0?1:(E+="\f",-1);break;case 44:i[u++]=(ee(E)-1)*g,g=1;break;case 64:45===pe()&&(E+=ye(fe())),f=pe(),l=d=ee(y=E+=Ce(he())),b++;break;case 45:45===h&&2==ee(E)&&(m=0)}}return s}function Re(e,t,n,a,r,s,o,i,c,u,l){for(var d=r-1,f=0===r?s:[""],p=te(f),h=0,m=0,v=0;h<a;++h)for(var g=0,b=Y(e,d+1,d=Q(m=o[h])),y=e;g<p;++g)(y=J(m>0?f[g]+" "+b:K(b,/&\f/g,f[g])))&&(c[v++]=y);return ue(e,t,n,0===r?Le:i,c,u,l)}function je(e,t,n){return ue(e,t,n,Ne,W(ie),Y(e,2,-2),0)}function Me(e,t,n,a){return ue(e,t,n,Te,Y(e,0,a),Y(e,a+1,-1),a)}var qe=function(e,t,n){for(var a=0,r=0;a=r,r=pe(),38===a&&12===r&&(t[n]=1),!ve(r);)fe();return me(e,oe)},De=new WeakMap,Fe=function(e){if("rule"===e.type&&e.parent&&!(e.length<1)){for(var t=e.value,n=e.parent,a=e.column===n.column&&e.line===n.line;"rule"!==n.type;)if(!(n=n.parent))return;if((1!==e.props.length||58===t.charCodeAt(0)||De.get(n))&&!a){De.set(e,!0);for(var r=[],s=function(e,t){return be(function(e,t){var n=-1,a=44;do{switch(ve(a)){case 0:38===a&&12===pe()&&(t[n]=1),e[n]+=qe(oe-1,t,n);break;case 2:e[n]+=ye(a);break;case 4:if(44===a){e[++n]=58===pe()?"&\f":"",t[n]=e[n].length;break}default:e[n]+=W(a)}}while(a=fe());return e}(ge(e),t))}(t,r),o=n.props,i=0,c=0;i<s.length;i++)for(var u=0;u<o.length;u++,c++)e.props[c]=r[i]?s[i].replace(/&\f/g,o[u]):o[u]+" "+s[i]}}},ze=function(e){if("decl"===e.type){var t=e.value;108===t.charCodeAt(0)&&98===t.charCodeAt(2)&&(e.return="",e.value="")}};function Ge(e,t){switch(function(e,t){return 45^Z(e,0)?(((t<<2^Z(e,0))<<2^Z(e,1))<<2^Z(e,2))<<2^Z(e,3):0}(e,t)){case 5103:return Se+"print-"+e+e;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return Se+e+e;case 5349:case 4246:case 4810:case 6968:case 2756:return Se+e+$e+e+Ae+e+e;case 6828:case 4268:return Se+e+Ae+e+e;case 6165:return Se+e+Ae+"flex-"+e+e;case 5187:return Se+e+K(e,/(\w+).+(:[^]+)/,Se+"box-$1$2"+Ae+"flex-$1$2")+e;case 5443:return Se+e+Ae+"flex-item-"+K(e,/flex-|-self/,"")+e;case 4675:return Se+e+Ae+"flex-line-pack"+K(e,/align-content|flex-|-self/,"")+e;case 5548:return Se+e+Ae+K(e,"shrink","negative")+e;case 5292:return Se+e+Ae+K(e,"basis","preferred-size")+e;case 6060:return Se+"box-"+K(e,"-grow","")+Se+e+Ae+K(e,"grow","positive")+e;case 4554:return Se+K(e,/([^-])(transform)/g,"$1"+Se+"$2")+e;case 6187:return K(K(K(e,/(zoom-|grab)/,Se+"$1"),/(image-set)/,Se+"$1"),e,"")+e;case 5495:case 3959:return K(e,/(image-set\([^]*)/,Se+"$1$`$1");case 4968:return K(K(e,/(.+:)(flex-)?(.*)/,Se+"box-pack:$3"+Ae+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+Se+e+e;case 4095:case 3583:case 4068:case 2532:return K(e,/(.+)-inline(.+)/,Se+"$1$2")+e;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(ee(e)-1-t>6)switch(Z(e,t+1)){case 109:if(45!==Z(e,t+4))break;case 102:return K(e,/(.+:)(.+)-([^]+)/,"$1"+Se+"$2-$3$1"+$e+(108==Z(e,t+3)?"$3":"$2-$3"))+e;case 115:return~X(e,"stretch")?Ge(K(e,"stretch","fill-available"),t)+e:e}break;case 4949:if(115!==Z(e,t+1))break;case 6444:switch(Z(e,ee(e)-3-(~X(e,"!important")&&10))){case 107:return K(e,":",":"+Se)+e;case 101:return K(e,/(.+:)([^;!]+)(;|!.+)?/,"$1"+Se+(45===Z(e,14)?"inline-":"")+"box$3$1"+Se+"$2$3$1"+Ae+"$2box$3")+e}break;case 5936:switch(Z(e,t+11)){case 114:return Se+e+Ae+K(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return Se+e+Ae+K(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return Se+e+Ae+K(e,/[svh]\w+-[tblr]{2}/,"lr")+e}return Se+e+Ae+e+e}return e}var Be=[function(e,t,n,a){if(e.length>-1&&!e.return)switch(e.type){case Te:e.return=Ge(e.value,e.length);break;case _e:return Ue([le(e,{value:K(e.value,"@","@"+Se)})],a);case Le:if(e.length)return function(e,t){return e.map(t).join("")}(e.props,(function(t){switch(function(e){return(e=/(::plac\w+|:read-\w+)/.exec(e))?e[0]:e}(t)){case":read-only":case":read-write":return Ue([le(e,{props:[K(t,/:(read-\w+)/,":-moz-$1")]})],a);case"::placeholder":return Ue([le(e,{props:[K(t,/:(plac\w+)/,":"+Se+"input-$1")]}),le(e,{props:[K(t,/:(plac\w+)/,":-moz-$1")]}),le(e,{props:[K(t,/:(plac\w+)/,Ae+"input-$1")]})],a)}return""}))}}],Ve={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,scale:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};function Qe(e){var t=Object.create(null);return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}var We=/[A-Z]|^ms/g,He=/_EMO_([^_]+?)_([^]*?)_EMO_/g,Je=function(e){return 45===e.charCodeAt(1)},Ke=function(e){return null!=e&&"boolean"!=typeof e},Xe=Qe((function(e){return Je(e)?e:e.replace(We,"-$&").toLowerCase()})),Ze=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(He,(function(e,t,n){return et={name:t,styles:n,next:et},t}))}return 1===Ve[e]||Je(e)||"number"!=typeof t||0===t?t:t+"px"};function Ye(e,t,n){if(null==n)return"";var a=n;if(void 0!==a.__emotion_styles)return a;switch(typeof n){case"boolean":return"";case"object":var r=n;if(1===r.anim)return et={name:r.name,styles:r.styles,next:et},r.name;var s=n;if(void 0!==s.styles){var o=s.next;if(void 0!==o)for(;void 0!==o;)et={name:o.name,styles:o.styles,next:et},o=o.next;return s.styles+";"}return function(e,t,n){var a="";if(Array.isArray(n))for(var r=0;r<n.length;r++)a+=Ye(e,t,n[r])+";";else for(var s in n){var o=n[s];if("object"!=typeof o){var i=o;null!=t&&void 0!==t[i]?a+=s+"{"+t[i]+"}":Ke(i)&&(a+=Xe(s)+":"+Ze(s,i)+";")}else if(!Array.isArray(o)||"string"!=typeof o[0]||null!=t&&void 0!==t[o[0]]){var c=Ye(e,t,o);switch(s){case"animation":case"animationName":a+=Xe(s)+":"+c+";";break;default:a+=s+"{"+c+"}"}}else for(var u=0;u<o.length;u++)Ke(o[u])&&(a+=Xe(s)+":"+Ze(s,o[u])+";")}return a}(e,t,n);case"function":if(void 0!==e){var i=et,c=n(e);return et=i,Ye(e,t,c)}}var u=n;if(null==t)return u;var l=t[u];return void 0!==l?l:u}var et,tt=/label:\s*([^\s;{]+)\s*(;|$)/g;function nt(e,t,n){if(1===e.length&&"object"==typeof e[0]&&null!==e[0]&&void 0!==e[0].styles)return e[0];var a=!0,r="";et=void 0;var s=e[0];null==s||void 0===s.raw?(a=!1,r+=Ye(n,t,s)):r+=s[0];for(var o=1;o<e.length;o++)r+=Ye(n,t,e[o]),a&&(r+=s[o]);tt.lastIndex=0;for(var i,c="";null!==(i=tt.exec(r));)c+="-"+i[1];var u=function(e){for(var t,n=0,a=0,r=e.length;r>=4;++a,r-=4)t=1540483477*(65535&(t=255&e.charCodeAt(a)|(255&e.charCodeAt(++a))<<8|(255&e.charCodeAt(++a))<<16|(255&e.charCodeAt(++a))<<24))+(59797*(t>>>16)<<16),n=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&n)+(59797*(n>>>16)<<16);switch(r){case 3:n^=(255&e.charCodeAt(a+2))<<16;case 2:n^=(255&e.charCodeAt(a+1))<<8;case 1:n=1540483477*(65535&(n^=255&e.charCodeAt(a)))+(59797*(n>>>16)<<16)}return(((n=1540483477*(65535&(n^=n>>>13))+(59797*(n>>>16)<<16))^n>>>15)>>>0).toString(36)}(r)+c;return{name:u,styles:r,next:et}}function at(e,t,n){var a="";return n.split(" ").forEach((function(n){void 0!==e[n]?t.push(e[n]+";"):n&&(a+=n+" ")})),a}function rt(e,t){if(void 0===e.inserted[t.name])return e.insert("",t,e.sheet,!0)}function st(e,t,n){var a=[],r=at(e,a,n);return a.length<2?n:r+t(a)}var ot=function e(t){for(var n="",a=0;a<t.length;a++){var r=t[a];if(null!=r){var s=void 0;switch(typeof r){case"boolean":break;case"object":if(Array.isArray(r))s=e(r);else for(var o in s="",r)r[o]&&o&&(s&&(s+=" "),s+=o);break;default:s=r}s&&(n&&(n+=" "),n+=s)}}return n};var it=function(e){var t=function(e){var t=e.key;if("css"===t){var n=document.querySelectorAll("style[data-emotion]:not([data-s])");Array.prototype.forEach.call(n,(function(e){-1!==e.getAttribute("data-emotion").indexOf(" ")&&(document.head.appendChild(e),e.setAttribute("data-s",""))}))}var a,r,s=e.stylisPlugins||Be,o={},i=[];a=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll('style[data-emotion^="'+t+' "]'),(function(e){for(var t=e.getAttribute("data-emotion").split(" "),n=1;n<t.length;n++)o[t[n]]=!0;i.push(e)}));var c,u,l,d,f=[Ie,(d=function(e){c.insert(e)},function(e){e.root||(e=e.return)&&d(e)})],p=(u=[Fe,ze].concat(s,f),l=te(u),function(e,t,n,a){for(var r="",s=0;s<l;s++)r+=u[s](e,t,n,a)||"";return r});r=function(e,t,n,a){c=n,Ue(Oe(e?e+"{"+t.styles+"}":t.styles),p),a&&(h.inserted[t.name]=!0)};var h={key:t,sheet:new V({key:t,container:a,nonce:e.nonce,speedy:e.speedy,prepend:e.prepend,insertionPoint:e.insertionPoint}),nonce:e.nonce,inserted:o,registered:{},insert:r};return h.sheet.hydrate(i),h}(e);t.sheet.speedy=function(e){this.isSpeedy=e},t.compat=!0;var n=function(){for(var e=arguments.length,n=new Array(e),a=0;a<e;a++)n[a]=arguments[a];var r=nt(n,t.registered,void 0);return function(e,t){!function(e,t){var n=e.key+"-"+t.name;void 0===e.registered[n]&&(e.registered[n]=t.styles)}(e,t);var n=e.key+"-"+t.name;if(void 0===e.inserted[t.name]){var a=t;do{e.insert(t===a?"."+n:"",a,e.sheet,!0),a=a.next}while(void 0!==a)}}(t,r),t.key+"-"+r.name};return{css:n,cx:function(){for(var e=arguments.length,a=new Array(e),r=0;r<e;r++)a[r]=arguments[r];return st(t.registered,n,ot(a))},injectGlobal:function(){for(var e=arguments.length,n=new Array(e),a=0;a<e;a++)n[a]=arguments[a];var r=nt(n,t.registered);rt(t,r)},keyframes:function(){for(var e=arguments.length,n=new Array(e),a=0;a<e;a++)n[a]=arguments[a];var r=nt(n,t.registered),s="animation-"+r.name;return rt(t,{name:r.name,styles:"@keyframes "+s+"{"+r.styles+"}"}),s},hydrate:function(e){e.forEach((function(e){t.inserted[e]=!0}))},flush:function(){t.registered={},t.inserted={},t.sheet.flush()},sheet:t.sheet,cache:t,getRegisteredStyles:at.bind(null,t.registered),merge:st.bind(null,t.registered,n)}}({key:"css"}),ct=(it.flush,it.hydrate,it.cx,it.merge,it.getRegisteredStyles,it.injectGlobal,it.keyframes,it.css);function ut(e){const[t,n]=G();return t&&n?i().createElement(lt,{...e,openAssistant:n}):null}function lt({prompt:e,origin:t,context:n,autoSend:a=!0,title:r="Analyze with Assistant",size:c="sm",iconOnlyButton:u=!1,openAssistant:l}){const d=(0,B.useStyles2)(dt);return(0,o.useEffect)((()=>{(0,s.reportInteraction)("grafana_assistant_app_open_sidebar_button_displayed",{from:t})}),[t]),i().createElement(i().Fragment,null,u?i().createElement(B.IconButton,{name:"ai-sparkle",onClick:()=>l({prompt:e,context:n,autoSend:a,origin:t}),variant:"secondary",size:c,"aria-label":r,className:d.icon,tooltip:r,"data-testid":"assistant-icon-button"}):i().createElement(B.Button,{icon:"ai-sparkle",onClick:()=>l({prompt:e,context:n,autoSend:a,origin:t}),variant:"secondary",fill:"solid",size:c,title:r,"aria-label":r,className:d.button,"data-testid":"assistant-button"},r))}it.sheet,it.cache;const dt=e=>({button:ct({label:"assistant-button",border:"1px solid transparent",borderImage:"linear-gradient(90deg, rgb(168, 85, 247), rgb(249, 115, 22)) 1"}),icon:ct({label:"assistant-icon",border:"1px solid transparent",backgroundClip:"padding-box",padding:e.spacing(.5),"&:hover":{borderImage:"linear-gradient(90deg, rgb(168, 85, 247), rgb(249, 115, 22)) 1 !important",border:"1px solid transparent",backgroundClip:"padding-box"}})});module.exports=t})();

package/dist/sidebar.d.ts

@@ -1,14 +1,18 @@
 import { ChatContextItem } from './context/types';
 export type OpenAssistantProps = {
+    origin: string;
     prompt?: string;
     context?: ChatContextItem[];
+    autoSend?: boolean;
 };
 /**
  * Open the Grafana Assistant sidebar with a given initial prompt.
  *
  * @param props - The props to pass to the assistant.
+ * @param props.origin - The origin of the request that opened the assistant. This is used to track the source of the request. Should be a structured string using forward slashes, with the first part as a namespace. Examples: 'grafana-datasources/prometheus/query-builder', 'grafana-slo-app/slo-editor-overview', 'grafana/trace-view-analyzer`.
  * @param props.prompt - The initial prompt to display in the assistant.
  * @param props.context - The initial context to display in the assistant. Created with `createContext`.
+ * @param props.autoSend - Whether to automatically send the initial prompt. When true, opens a chat and sends the initial prompt right away. When false, opens chat and updates user message without sending it. Defaults to true.
  */
 export declare function openAssistant(props: OpenAssistantProps): void;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/assistant",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Type definitions and helper functions for Grafana Assistant",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,10 @@
     "prebuild": "rm -rf dist",
     "build": "webpack --config webpack.config.cjs --mode production && tsc --emitDeclarationOnly",
     "dev": "webpack --config webpack.config.cjs --mode development",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "test": "jest",
+    "test:watch": "jest --watch --onlyChanged",
+    "test:ci": "jest --passWithNoTests --maxWorkers 4"
   },
   "keywords": [
     "grafana",
@@ -22,6 +25,13 @@
   "author": "Grafana Labs",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@storybook/react": "^8.6.14",
+    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/react": "14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/testing-library__jest-dom": "5.14.8",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "react": "18.3.1",
     "rxjs": "7.8.2",
     "ts-loader": "^9.0.0",