Auto-generate: Break out reply sanitization into separate util func (#76091)

public/app/features/dashboard/components/GenAI/GenAIButton.tsx

@@ -7,7 +7,7 @@ import { Button, Spinner, useStyles2, Tooltip, Toggletip, Text } from '@grafana/
 import { GenAIHistory } from './GenAIHistory';
 import { StreamStatus, useOpenAIStream } from './hooks';
 import { AutoGenerateItem, EventTrackingSrc, reportAutoGenerateInteraction } from './tracking';
-import { OPEN_AI_MODEL, Message } from './utils';
+import { OPEN_AI_MODEL, Message, sanitizeReply } from './utils';
 
 export interface GenAIButtonProps {
   // Button label text
@@ -79,13 +79,13 @@ export const GenAIButton = ({
   useEffect(() => {
     // Todo: Consider other options for `"` sanitation
     if (isFirstHistoryEntry && reply) {
-      onGenerate(reply.replace(/^"|"$/g, ''));
+      onGenerate(sanitizeReply(reply));
     }
   }, [streamStatus, reply, onGenerate, isFirstHistoryEntry]);
 
   useEffect(() => {
     if (streamStatus === StreamStatus.COMPLETED) {
-      pushHistoryEntry(reply.replace(/^"|"$/g, ''));
+      pushHistoryEntry(sanitizeReply(reply));
     }
   }, [history, streamStatus, reply, pushHistoryEntry]);
 

public/app/features/dashboard/components/GenAI/GenAIHistory.tsx

@@ -21,7 +21,7 @@ import { GenerationHistoryCarousel } from './GenerationHistoryCarousel';
 import { QuickFeedback } from './QuickFeedback';
 import { StreamStatus, useOpenAIStream } from './hooks';
 import { AutoGenerateItem, EventTrackingSrc, reportAutoGenerateInteraction } from './tracking';
-import { Message, OPEN_AI_MODEL, QuickFeedbackType } from './utils';
+import { Message, OPEN_AI_MODEL, QuickFeedbackType, sanitizeReply } from './utils';
 
 export interface GenAIHistoryProps {
   history: string[];
@@ -61,8 +61,7 @@ export const GenAIHistory = ({
 
   useEffect(() => {
     if (streamStatus === StreamStatus.COMPLETED) {
-      // TODO: Break out sanitize regex into shared util function
+      updateHistory(sanitizeReply(reply));
-      updateHistory(reply.replace(/^"|"$/g, ''));
     }
   }, [streamStatus, reply, updateHistory]);
 
@@ -144,7 +143,7 @@ export const GenAIHistory = ({
           history={history}
           index={currentIndex}
           onNavigate={onNavigate}
-          reply={reply.replace(/^"|"$/g, '')}
+          reply={sanitizeReply(reply)}
           streamStatus={streamStatus}
         />
       </div>

public/app/features/dashboard/components/GenAI/utils.test.ts

@@ -1,7 +1,7 @@
 import { createDashboardModelFixture, createPanelJSONFixture } from '../../state/__fixtures__/dashboardFixtures';
 
 import { openai } from './llms';
-import { getDashboardChanges, isLLMPluginEnabled } from './utils';
+import { getDashboardChanges, isLLMPluginEnabled, sanitizeReply } from './utils';
 
 // Mock the llms.openai module
 jest.mock('./llms', () => ({
@@ -82,3 +82,21 @@ describe('isLLMPluginEnabled', () => {
     expect(enabled).toBe(false);
   });
 });
+
+describe('sanitizeReply', () => {
+  it('should remove quotes from the beginning and end of a string', () => {
+    expect(sanitizeReply('"Hello, world!"')).toBe('Hello, world!');
+  });
+
+  it('should not remove quotes from the middle of a string', () => {
+    expect(sanitizeReply('Hello, "world"!')).toBe('Hello, "world"!');
+  });
+
+  it('should only remove quotes if they are at the beginning or end of a string, and not in the middle', () => {
+    expect(sanitizeReply('"Hello", world!')).toBe('Hello", world!');
+  });
+
+  it('should return an empty string if given an empty string', () => {
+    expect(sanitizeReply('')).toBe('');
+  });
+});

public/app/features/dashboard/components/GenAI/utils.ts

@@ -24,6 +24,13 @@ export enum QuickFeedbackType {
  */
 export const OPEN_AI_MODEL = 'gpt-4';
 
+/**
+ * Sanitize the reply from OpenAI by removing the leading and trailing quotes.
+ */
+export const sanitizeReply = (reply: string) => {
+  return reply.replace(/^"|"$/g, '');
+};
+
 /**
  * Diff the current dashboard with the original dashboard and the dashboard after migration
  * to split the changes into user changes and migration changes.