OpenAI Prompt History

cspell.config.json

@@ -162,6 +162,6 @@
     "Ymin",
     "llms",
     "proxying",
-    ""
+    "uuidv"
   ]
 }

src/components/QueryEditor/OpenAIEditor.tsx

@@ -11,6 +11,11 @@ import {
   useStyles2,
   TextArea,
   HorizontalGroup,
+  Field,
+  Switch,
+  Tooltip,
+  CustomScrollbar,
+  Icon,
 } from '@grafana/ui';
 import { AdxDataSource } from 'datasource';
 import React, { ChangeEvent, useEffect, useState } from 'react';
@@ -21,6 +26,7 @@ import { css } from '@emotion/css';
 import { useAsync } from 'react-use';
 
 import { getFunctions, getSignatureHelp } from './Suggestions';
+import { PromptHistory } from './PromptHistory';
 
 type Props = QueryEditorProps<AdxDataSource, KustoQuery, AdxDataSourceOptions>;
 
@@ -47,9 +53,20 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
   const [generatedQuery, setGeneratedQuery] = useState('//OpenAI generated query');
   const [variables] = useState(getTemplateSrv().getVariables());
   const [stateSchema, setStateSchema] = useState(cloneDeep(schema));
+  const [showQueryHistory, setShowQueryHistory] = useState(false);
+  const [parsedStoredPrompts, setParsedStoredPrompts] = useState([]);
   const styles = useStyles2(getStyles);
   const baselinePrompt = `You are an AI assistant that is fluent in KQL for querying Azure Data Explorer and you only respond with the correct KQL code snippets and no explanations. Generate a query that fulfills the following text.\nText:"""`;
 
+  useEffect(() => {
+    const currentStoredPrompts = localStorage.getItem('storedOpenAIPrompts');
+    let allParsedStoredPrompts = [];
+    if (currentStoredPrompts !== null) {
+      allParsedStoredPrompts = JSON.parse(currentStoredPrompts);
+    };
+    setParsedStoredPrompts(allParsedStoredPrompts); 
+  }, [])
+
   useAsync(async () => {
     const enabled = await llms.openai.enabled();
     setEnabled(enabled);
@@ -71,6 +88,18 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
     }
   }, [schema, stateSchema]);
 
+  const addPromptToLocalStorage = () => {
+    let allPrompts;
+    if (parsedStoredPrompts.length > 0) {
+      allPrompts = [...parsedStoredPrompts, prompt];
+    } else {
+      allPrompts = [prompt];
+    };
+    const stringifiedPrompts = JSON.stringify(allPrompts);
+    localStorage.setItem("storedOpenAIPrompts", stringifiedPrompts);
+    setParsedStoredPrompts(allPrompts);
+  };
+
   const generateQuery = () => {
     reportInteraction('grafana_ds_adx_openai_query_generated');
     setWaiting(true);
@@ -83,7 +112,6 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
         .generateQueryForOpenAI(`${baselinePrompt}${prompt}"""`)
         .then((resp) => {
           setWaiting(false);
-          setGeneratedQuery(resp);
         })
         .catch((e) => {
           setWaiting(false);
@@ -111,6 +139,10 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
         setGeneratedQuery(m);
       },
       complete: () => {
+        if (prompt !== "") {
+          addPromptToLocalStorage();
+          setPrompt('');
+        };
         setWaiting(false);
       },
       error: (e) => {
@@ -175,7 +207,14 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
 
   if (!stateSchema) {
     return null;
-  }
+  };
+
+  const useStoredPrompt = (prompt: string) => {
+    setShowQueryHistory(false);
+    setPrompt(prompt);
+    onRawQueryChange(prompt);
+    onRunQuery();
+  };
 
   return (
     <div>
@@ -221,13 +260,37 @@ export const OpenAIEditor: React.FC<RawQueryEditorProps> = (props) => {
           >
             {isWaiting && <Spinner className={styles.spinnerSpace} inline={true} />} Generate query
           </Button>
+          <Field label="Show OpenAI history" style={{ display: 'flex', flexDirection: 'row', margin: '5px' }}>
+            <div style={{ display: 'flex' }}>
+              <div style={{ display: 'flex', justifyContent: 'flex-start', margin: '0 10px 0 5px'}}>
+                <Tooltip
+                  content={'View past generated prompts that are stored on your local browser.'}
+                  placement="bottom-end"
+                >
+                  <Icon name="info-circle" size="sm" className={styles.settingsIcon} />
+                </Tooltip>
+              </div>
+              <Switch value={showQueryHistory} onChange={() => setShowQueryHistory(!showQueryHistory)}></Switch>
+            </div>
+          </Field>
         </HorizontalGroup>
-        <TextArea
-          data-testid={selectors.components.queryEditor.codeEditor.openAI}
-          value={prompt}
-          onChange={onPromptChange}
-          className={styles.innerMargin}
-        ></TextArea>
+        {showQueryHistory ? (
+           <CustomScrollbar autoHeightMax="300px">
+            <PromptHistory 
+              parsedStoredPrompts={parsedStoredPrompts} 
+              useStoredPrompt={useStoredPrompt} 
+              setParsedStoredPrompts={setParsedStoredPrompts} 
+              setShowQueryHistory={setShowQueryHistory}
+            />
+           </CustomScrollbar>
+        ) : (
+          <TextArea
+            data-testid={selectors.components.queryEditor.codeEditor.openAI}
+            value={prompt}
+            onChange={onPromptChange}
+            className={styles.textArea}
+          ></TextArea>
+        )}
       </div>
       <div className={styles.dividerSpace}>
         <HorizontalGroup justify="flex-start" align="flex-start">
@@ -274,9 +337,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       color: theme.colors.text.link,
       textDecoration: 'underline',
     }),
-    innerMargin: css({
-      marginTop: theme.spacing(2),
-    }),
     editorSpace: css({
       paddingTop: theme.spacing(1),
     }),
@@ -289,5 +349,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     dividerSpace: css({
       marginTop: theme.spacing(4),
     }),
+    textArea: css({
+      marginTop: theme.spacing(2),
+      height: '100px'
+    }),
+    settingsIcon: css`
+      color: ${theme.colors.text.secondary};
+    `,
   };
 };

src/components/QueryEditor/PromptHistory.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Button, Icon, useStyles2 } from "@grafana/ui";
+import { v4 as uuidv4 } from 'uuid';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const PromptHistory = ({ parsedStoredPrompts, useStoredPrompt, setParsedStoredPrompts, setShowQueryHistory }) => {
+    const NO_STORED_PROMPTS_MESSAGE = "No prompts stored in history. When you write a prompt and click generate query, the prompt will be stored here.";
+    const styles = useStyles2(getStyles);
+
+    const removePrompt = (prompt: string) => {
+        const updatedPrompts = parsedStoredPrompts.filter((p) => p !== prompt);
+        const stringifiedPrompts = JSON.stringify(updatedPrompts);
+        localStorage.setItem("storedOpenAIPrompts", stringifiedPrompts);
+        setParsedStoredPrompts(updatedPrompts);
+    };
+
+    const useSelectedPrompt = (prompt: string) => {
+        useStoredPrompt(prompt);
+        setShowQueryHistory(false);
+    };
+
+    const generatePromptCards = ( ) => {
+        if (parsedStoredPrompts.length > 0) {
+            return parsedStoredPrompts.map((prompt) => {
+                return(
+                    <div key={uuidv4()} style={{ border: `1px solid`, padding: '20px', marginTop: '15px', height: '150px' }}>
+                        <div style={{ display: 'flex', justifyContent: 'flex-end'}}>
+                            <Button
+                                // eslint-disable-next-line react-hooks/rules-of-hooks
+                                onClick={() => removePrompt(prompt)}
+                                icon="trash-alt"
+                                aria-label="Remove"
+                                size="sm"
+                                variant="secondary"
+                            />  
+                        </div>
+                        <div style={{ width: '90%', height: '50%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <div style={{ margin: '0'}}>{prompt}</div>
+                            <Button
+                                // eslint-disable-next-line react-hooks/rules-of-hooks
+                                onClick={() => useSelectedPrompt(prompt)}
+                                variant="secondary"
+                                size="sm"
+                            >
+                                Use this prompt
+                            </Button>
+                        </div>
+                    </div>
+                )
+            })
+        } else { 
+            return (  
+                <div className={styles.wrapper}>
+                    <div className={styles.icon}>
+                        <Icon name="exclamation-triangle" />
+                    </div>
+                    <div className={styles.message}>
+                        {NO_STORED_PROMPTS_MESSAGE}
+                    </div>
+              </div>
+            ) 
+        };
+    };
+
+    return(
+        <div>
+           {generatePromptCards()}
+        </div>
+    )
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+    wrapper: css({
+      marginTop: theme.spacing(2),
+      background: theme.colors.background.secondary,
+      display: 'flex',
+    }),
+    icon: css({
+      background: theme.colors.error.main,
+      color: theme.colors.error.contrastText,
+      padding: theme.spacing(1),
+    }),
+    message: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontFamily: theme.typography.fontFamilyMonospace,
+      padding: theme.spacing(1),
+    }),
+  });