Files
grafana/public/app/features/dashboard/components/GenAI/GenAIPanelDescriptionButton.tsx
Ashley Harrison 47f8717149 React: Use new JSX transform (#88802)
* update eslint, tsconfig + esbuild to handle new jsx transform

* remove thing that breaks the new jsx transform

* remove react imports

* adjust grafana-icons build

* is this the correct syntax?

* try this

* well this was much easier than expected...

* change grafana-plugin-configs webpack config

* fixes

* fix lockfile

* fix 2 more violations

* use path.resolve instead of require.resolve

* remove react import

* fix react imports

* more fixes

* remove React import

* remove import React from docs

* remove another react import
2024-06-25 12:43:47 +01:00

54 lines
1.9 KiB
TypeScript

import { Panel } from '@grafana/schema';
import { getDashboardSrv } from '../../services/DashboardSrv';
import { GenAIButton } from './GenAIButton';
import { EventTrackingSrc } from './tracking';
import { Message, Role, getFilteredPanelString } from './utils';
interface GenAIPanelDescriptionButtonProps {
onGenerate: (description: string) => void;
panel: Panel;
}
const PANEL_DESCRIPTION_CHAR_LIMIT = 200;
const DESCRIPTION_GENERATION_STANDARD_PROMPT =
'You are an expert in creating Grafana Panels.\n' +
'You will be given the title and description of the dashboard the panel is in as well as the JSON for the panel.\n' +
'Your goal is to write a descriptive and concise panel description.\n' +
'The panel description is meant to explain the purpose of the panel, not just its attributes.\n' +
'Do not refer to the panel; simply describe its purpose.\n' +
'There should be no numbers in the description except for thresholds.\n' +
`The description should be, at most, ${PANEL_DESCRIPTION_CHAR_LIMIT} characters.`;
export const GenAIPanelDescriptionButton = ({ onGenerate, panel }: GenAIPanelDescriptionButtonProps) => {
return (
<GenAIButton
messages={() => getMessages(panel)}
onGenerate={onGenerate}
eventTrackingSrc={EventTrackingSrc.panelDescription}
toggleTipTitle={'Improve your panel description'}
/>
);
};
function getMessages(panel: Panel): Message[] {
const dashboard = getDashboardSrv().getCurrent()!;
const panelString = getFilteredPanelString(panel);
return [
{
content: DESCRIPTION_GENERATION_STANDARD_PROMPT,
role: Role.system,
},
{
content:
`The panel is part of a dashboard with the title: ${dashboard.title}\n` +
`The panel is part of a dashboard with the description: ${dashboard.description}\n` +
`This is the JSON which defines the panel: ${panelString}`,
role: Role.user,
},
];
}