big conf window, nicer diff (#308)

* big conf window, nicer diff

* style changes

* sql edit checkbox

Author: nuwandavek

apps/src/metabase/appController.ts

@@ -117,10 +117,6 @@ export class MetabaseController extends AppController<MetabaseAppState> {
     const allSnippetsDict = await getSnippets() as MetabaseStateSnippetsDict;
     const allTemplateTags = getAllTemplateTagsInQuery(sql, allSnippetsDict)
     const state = (await this.app.getState()) as MetabaseAppStateSQLEditor;
-    const userApproved = await RPCs.getUserConfirmation({content: sql, contentTitle: "Update SQL query?", oldContent: state.sqlQuery});
-    if (!userApproved) {
-      throw new Error("Action (and subsequent plan) cancelled!");
-    }
     if (state.sqlEditorState == "closed") {
       await this.toggleSQLEditor("open");
     }
@@ -169,15 +165,11 @@ export class MetabaseController extends AppController<MetabaseAppState> {
     const actionContent: BlankMessageContent = {
       type: "BLANK",
     };
-    // sql = processSQLWithCtesOrModels(sql, ctes);
-    // const metabaseState = this.app as App<MetabaseAppState>;
-    // const allModels = metabaseState.useStore().getState().toolContext?.dbInfo?.models || [];
-    // use allModels for this replacement
-    // sql = replaceLLMFriendlyIdentifiersInSqlWithModels(sql, allModels)
     const state = (await this.app.getState()) as MetabaseAppStateSQLEditor;
-    const userApproved = await RPCs.getUserConfirmation({content: sql, contentTitle: "Update SQL query with parameters?", oldContent: state.sqlQuery});
+    const { userApproved, userFeedback } = await RPCs.getUserConfirmation({content: sql, contentTitle: "Approve SQL Query?", oldContent: state.currentCard?.dataset_query?.native?.query || state.sqlQuery || ''});
     if (!userApproved) {
-      throw new Error("Action (and subsequent plan) cancelled!");
+      actionContent.content = '<UserCancelled>Reason: ' + (userFeedback === '' ?  'No particular reason given' : userFeedback) + '</UserCancelled>';
+      return actionContent;
     }
     if (state.sqlEditorState == "closed") {
       await this.toggleSQLEditor("open");
@@ -363,7 +355,7 @@ export class MetabaseController extends AppController<MetabaseAppState> {
     const actionContent: BlankMessageContent = {
       type: "BLANK",
     };
-    const userApproved = await RPCs.getUserConfirmation({content: memory, contentTitle: "Shall I add this to memory?", oldContent: undefined, override: true});
+    const { userApproved, userFeedback } = await RPCs.getUserConfirmation({content: memory, contentTitle: "Shall I add this to memory?", oldContent: undefined, override: true});
     if (userApproved) {
         dispatch(addMemory(memory));
         dispatch(updateIsDevToolsOpen(true))
@@ -387,10 +379,6 @@ export class MetabaseController extends AppController<MetabaseAppState> {
     }
   })
   async executeSQLQuery() {
-    const userApproved = await RPCs.getUserConfirmation({content: "Execute query", contentTitle: "Accept below action?", oldContent: undefined});
-    if (!userApproved) {
-      throw new Error("Action (and subsequent plan) cancelled!");
-    }
     return await this._executeSQLQueryInternal();
   }
 
@@ -451,22 +439,11 @@ export class MetabaseController extends AppController<MetabaseAppState> {
     const metabaseState = this.app as App<MetabaseAppState>;
     const pageType = metabaseState.useStore().getState().toolContext?.pageType;
 
-    // Check if template_tags or parameters are provided and non-empty
-    const hasTemplateTagsOrParams = (template_tags && Object.keys(template_tags).length > 0) || (parameters && Array.isArray(parameters) && parameters.length > 0);
-    
     if (pageType === 'sql') {
-        // if (hasTemplateTagsOrParams) {
-            return await this.updateSQLQueryWithParams({ sql, template_tags, parameters, parameterValues, executeImmediately: true, _type: "markdown", ctes: _ctes });
-        // } else {
-            // return await this.updateSQLQuery({ sql, executeImmediately: true, _type: "csv", ctes: _ctes });
-        // }
+        return await this.updateSQLQueryWithParams({ sql, template_tags, parameters, parameterValues, executeImmediately: true, _type: "markdown", ctes: _ctes });
     }
     else if ((pageType === 'dashboard') || (pageType === 'unknown')) {
-        // if (hasTemplateTagsOrParams) {
-            return await this.runSQLQueryWithParams({ sql, template_tags, parameters, ctes: _ctes });
-        // } else {
-            // return await this.runSQLQuery({ sql, ctes: _ctes });
-        // }
+        return await this.runSQLQueryWithParams({ sql, template_tags, parameters, ctes: _ctes });
     }
   }
 

package.json

@@ -16,6 +16,7 @@
   },
   "packageManager": "yarn@4.3.1",
   "dependencies": {
+    "react-diff-viewer-continued": "^3.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-window": "^1.8.11"
   }

web/src/app/userConfirmation.ts

@@ -7,18 +7,20 @@ import { abortPlan } from '../state/chat/reducer'
 export async function getUserConfirmation({content, contentTitle, oldContent, override = false}: {content: string, contentTitle: string, oldContent: string | undefined, override?: boolean}) {
   const state = getState()
   const isEnabled = state.settings.confirmChanges || override
-  if (!isEnabled) return true
+  if (!isEnabled) return { userApproved: true, userFeedback: '' }
   const thread = state.chat.activeThread
   dispatch(toggleUserConfirmation({show: true, content: content, contentTitle: contentTitle, oldContent: oldContent}))
 
   while (true){
     const state = getState()
     const userConfirmation = state.chat.threads[thread].userConfirmation
+    console.log('Polling user confirmation:', userConfirmation.show, userConfirmation.content, content)
     if (userConfirmation.show && userConfirmation.content === content && userConfirmation.userInput != 'NULL'){
       const userApproved = userConfirmation.userInput == 'APPROVE'
-      console.log('User approved:', userApproved)
+      const userFeedback = userConfirmation.userFeedback || ''
+      console.log('User approved:', userApproved, 'feedback:', userConfirmation.userFeedback || 'No feedback')
       dispatch(toggleUserConfirmation({show: false, content: '', contentTitle: '', oldContent: ''}))
-      return userApproved
+      return { userApproved, userFeedback }
     }
     await sleep(100)
   }

web/src/components/common/ChatInputArea.tsx

@@ -12,9 +12,11 @@ import AbortTaskButton from './AbortTaskButton'
 import AutosizeTextarea from './AutosizeTextarea'
 import { abortPlan } from '../../state/chat/reducer'
 import { setInstructions as setTaskInstructions } from '../../state/thumbnails/reducer'
-import { setDemoMode } from '../../state/settings/reducer'
+import { setConfirmChanges } from '../../state/settings/reducer'
 import { configs } from '../../constants'
 import _ from 'lodash'
+import { MetabaseContext } from 'apps/types'
+import { getApp } from '../../helpers/app'
 
 interface ChatInputAreaProps {
   isRecording: boolean
@@ -27,17 +29,22 @@ interface ChatInputAreaProps {
   }
 }
 
+const app = getApp()
+const useAppStore = app.useStore()
+
 const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputAreaProps>(
   ({ isRecording, runTask, appEnabledStatus }, ref) => {
     const dispatch = useDispatch()
     const reduxInstructions = useSelector((state: RootState) => state.thumbnails.instructions)
     const activeThread = useSelector((state: RootState) => state.chat.threads[state.chat.activeThread])
-    const demoMode = useSelector((state: RootState) => state.settings.demoMode)
+    const confirmChanges = useSelector((state: RootState) => state.settings.confirmChanges)
     const taskInProgress = !(activeThread.status == 'FINISHED')
     const [instructions, setInstructions] = useState<string>(reduxInstructions)
 
-    const updateDemoMode = (value: boolean) => {
-      dispatch(setDemoMode(value))
+    // Tool context access for SQL page
+    const toolContext: MetabaseContext = useAppStore((state) => state.toolContext)
+    const updateConfirmChanges = (value: boolean) => {
+      dispatch(setConfirmChanges(value))
     }
 
     // Sync with redux instructions when they change
@@ -80,7 +87,7 @@ const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputAreaProps>(
             <HStack aria-label="chat-controls" position={"absolute"} bottom={0} width={"100%"} p={2}>
               <HStack justify={"space-between"} width={"100%"}>
                 <HStack gap={0}>
-                  {configs.IS_DEV && false && (
+                  {(toolContext.pageType === 'sql') && (
                     <Checkbox 
                       sx={{
                         '& input:not(:checked) + span': {
@@ -98,10 +105,10 @@ const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputAreaProps>(
                           marginLeft: 1,
                         }
                       }}
-                      isChecked={demoMode}
-                      onChange={(e) => updateDemoMode(e.target.checked)}
+                      isChecked={confirmChanges}
+                      onChange={(e) => updateConfirmChanges(e.target.checked)}
                     >
-                      <Text fontSize="xs">Advanced Mode</Text>
+                      <Text fontSize="xs">Review SQL Edits</Text>
                     </Checkbox>
                   )}
                 </HStack>

web/src/components/common/Markdown.tsx

@@ -131,11 +131,12 @@ function getTextFromChildren(children: any): string {
 function ModifiedBlockquote(props: any) {
     const textContent = getTextFromChildren(props.children);
     const isError = textContent.toLowerCase().includes('error');
-    
+    const isWarning = textContent.toLowerCase().includes('user cancellation');
+
     return (
         <blockquote style={{
             borderLeft: '4px solid', 
-            borderLeftColor: isError ? '#e53e3e' : '#14a085', 
+            borderLeftColor: isError ? '#e53e3e' : isWarning ? '#d69e2e' : '#14a085', 
             borderRadius: '2px 0 0 2px',
             paddingLeft: '16px', 
             margin: '0px',