Na}{

File Content: `GenAIDashboardChangesButton.tsx`

import React, { useCallback } from 'react';

import { DashboardModel } from '../../state';

import { GenAIButton } from './GenAIButton';
import { EventTrackingSrc } from './tracking';
import { getDashboardChanges, Message, Role } from './utils';

interface GenAIDashboardChangesButtonProps {
  dashboard: DashboardModel;
  onGenerate: (title: string) => void;
  disabled?: boolean;
}

const CHANGES_GENERATION_PREFIX_PROMPT = [
  'You are an expert in Grafana Dashboards',
  'Your goal is to write a description of the changes for a dashboard to display to the user',
  'You will be given human-readable diffs with most irrelevant lines filtered out',
].join('.\n');

const CHANGES_GENERATION_POSTFIX_PROMPT = [
  `Respond only with the diff description, which is meant to be loaded directly into the application for the user.`,
  `If there are no substantial user or migration changes, the correct description is "Minor changes only"`,
  `If there are too many changes of either kind, and those changes have a message saying 'too long', the correct response for that section is "Too many changes to auto-summarize"`,
  'In a diff, lines beginning with - are removed, and lines beginning with + are added.',
  'Lines with neither + nor - are included for context. Be careful not to mark them as added or removed if they do not start with + or -.',
  'If a line is changed, it will show a previous version removed and a new version added',
  'When referring to panel changes, use the panel title',
  'When using panel title, wrap it with double quotes',
  'When the panel changes position, just mention that the panel has changed position',
  'When an entire panel is added or removed, use the panel title and only say it was added or removed and disregard the rest of the changes for that panel',
  'Group together similar changes into one line when multiple panels are affected',
  'Refer to templating elements as variables',
  'Try to make the response as short as possible',
].join('.\n');

export const GenAIDashboardChangesButton = ({ dashboard, onGenerate, disabled }: GenAIDashboardChangesButtonProps) => {
  const messages = useCallback(() => getMessages(dashboard), [dashboard]);

  return (
    <GenAIButton
      messages={messages}
      onGenerate={onGenerate}
      temperature={0}
      model={'gpt-3.5-turbo-16k'}
      eventTrackingSrc={EventTrackingSrc.dashboardChanges}
      toggleTipTitle={'Improve your dashboard changes summary'}
      disabled={disabled}
    />
  );
};

function getMessages(dashboard: DashboardModel): Message[] {
  let { userChanges, migrationChanges } = getDashboardChanges(dashboard);
  if (userChanges.length > 8000) {
    userChanges =
      "User changes were too long, fill in the user changes section with 'User changes too long to auto-summarize'";
  }

  if (migrationChanges.split('\n').length < 10) {
    migrationChanges = 'No significant migration changes';
  } else if (migrationChanges.length > 8000) {
    migrationChanges =
      "Migration changes were too long, fill in the migration changes section with 'Migration changes too long to auto-summarize'";
  }

  return [
    {
      content: CHANGES_GENERATION_PREFIX_PROMPT,
      role: Role.system,
    },
    {
      content: `Summarize the following user changes diff under "User changes":\n${userChanges}`,
      role: Role.system,
    },
    {
      content:
        `Be sure to only include substantial user changes, such as adding or removing entire panels, changing panel titles or descriptions, etc.\n` +
        `Do not include "User Changes" section if there are no substantial user changes to report.`,
      role: Role.system,
    },
    {
      content: `Summarize the following migration changes diff under "Migration changes":\n${migrationChanges}`,
      role: Role.system,
    },
    {
      content:
        `Be sure to only include substantial migration changes, such as adding or removing entire panels, changing panel titles or descriptions, etc.\n` +
        `Ignore any threshold step changes or templating list changes.\n` +
        `Ignore other changes and do not include them in the summary. Do not include "Migration Changes" section if there are no substantial migration changes to report.\n` +
        `If there are substantial migration changes, add "Some autogenerated changes are included to update the dashboard to the latest valid schema version" at the end.`,
      role: Role.system,
    },
    {
      content: CHANGES_GENERATION_POSTFIX_PROMPT,
      role: Role.system,
    },
  ];
}

Name	Size	Permission
GenAIButton.test.tsx	11012 bytes	0644
GenAIButton.tsx	5873 bytes	0644
GenAIDashDescriptionButton.tsx	1963 bytes	0644
GenAIDashTitleButton.tsx	1717 bytes	0644
GenAIDashboardChangesButton.tsx	4537 bytes	0644
GenAIHistory.tsx	6561 bytes	0644
GenAIPanelDescriptionButton.tsx	2106 bytes	0644
GenAIPanelTitleButton.tsx	1682 bytes	0644
GenerationHistoryCarousel.tsx	1579 bytes	0644
MinimalisticPagination.tsx	1297 bytes	0644
QuickFeedback.tsx	1463 bytes	0644
hooks.ts	5332 bytes	0644
jsonDiffText.test.ts	9277 bytes	0644
jsonDiffText.ts	8237 bytes	0644
tracking.ts	1151 bytes	0644
utils.test.ts	3823 bytes	0644
utils.ts	4860 bytes	0644

File Content: GenAIDashboardChangesButton.tsx

File Content: `GenAIDashboardChangesButton.tsx`