Analyst Mode UI changes (#252)

nuwandavek · web-flow · commit a5fc2ec37ad2 · 2025-07-13T14:52:48.000+05:30
* simple visual changes

* add good badge and spacing styles

* fix undo buttons

* add more context checks

* modify tecxt
diff --git a/apps/src/metabase/appController.ts b/apps/src/metabase/appController.ts
@@ -352,17 +352,17 @@ export class MetabaseController extends AppController<MetabaseAppState> {
 
   @Action({
     labelRunning: "Executes the SQL query with parameters",
-    labelDone: "Executed query with parameters",
-    labelTask: "Executed SQL query with parameters",
+    labelDone: "Executed query",
+    labelTask: "Executed SQL query",
     description: "Executes the SQL query in the Metabase SQL editor with support for template tags and parameters.",
     renderBody: ({ sql, explanation }: { sql: string, explanation: string }, appState: MetabaseAppStateSQLEditor) => {
       const sqlQuery = appState?.sqlQuery
       return {text: explanation, code: sql, oldCode: sqlQuery, language: "sql"}
     }
   })
   async ExecuteQuery({ sql, _ctes = [], explanation = "", template_tags={}, parameters=[] }: { sql: string, _ctes?: CTE[], explanation?: string, template_tags?: object, parameters?: any[] }) {
-    console.log('Template tags are', template_tags)
-    console.log('Parameters are', parameters)
+    // console.log('Template tags are', template_tags)
+    // console.log('Parameters are', parameters)
     // Try parsing template_tags and parameters if they are strings
     try {
       if (typeof template_tags === 'string') {
diff --git a/web/src/components/common/ActionStack.tsx b/web/src/components/common/ActionStack.tsx
@@ -20,6 +20,7 @@ import { parseArguments } from '../../planner/plannerActions';
 import { CodeBlock } from './CodeBlock';
 import { ActionRenderInfo } from '../../state/chat/types';
 import { Markdown } from './Markdown';
+import {processModelToUIText} from '../../helpers/utils';
 
 // Todo: Vivek: Hardcoding here, need to fix this later
 // This is a list of actions that are undo/redoable
@@ -52,6 +53,9 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
   const currentTool = useSelector((state: RootState) => state.settings.iframeInfo.tool)
   const controller = getApp().actionController
   const pageType = useAppStore((state) => state.toolContext.pageType) || '';
+  const url = useAppStore((state) => state.toolContext.url) || '';
+  const origin = url ? new URL(url).origin : '';
+  
   const getActionLabels = (action: string, attr: string) => {
     if (controller) {
       const metadata = Reflect.getMetadata('actionMetadata', controller, action);
@@ -72,49 +76,50 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
     title = [...new Set(titles)].join(', ')
 
   }
-  let preExpanderText = actions.map(action => {
+  const preExpanderTextArr = actions.map(action => {
     const { text } = action.renderInfo || {}
-    return text || ''
-  }).filter(text => text !== '').join(', ')
+    return processModelToUIText(text || '', origin)
+  }).filter(text => text !== '')
+
+//   const preExpanderText = preExpanderTextArr.length > 1 
+//       ? preExpanderTextArr.map((text, i) => {
+//           return `\n\n **Query ${i+1}**: ${text} \n\n  ---`;
+//         }).join('\n\n')
+//       : preExpanderTextArr.join('\n\n');
+
 
 
-const UndoRedo: React.FC<{fn: string, sql: string, type: 'undo' | 'redo'}> = ({fn, sql, type}) => {
-    const urHandler = (event: React.MouseEvent, fn: string, sql: string) => {
-        event.preventDefault();
-        event.stopPropagation();
-        executeAction({
-            index: -1,
-            function: fn,
-            args: {sql: sql},
-        });
+    const UndoRedo: React.FC<{fn: string, sql: string, type: 'undo' | 'redo'}> = ({fn, sql, type}) => {
+        const urHandler = (event: React.MouseEvent, fn: string, sql: string) => {
+            event.preventDefault();
+            event.stopPropagation();
+            executeAction({
+                index: -1,
+                function: fn,
+                args: {sql: sql},
+            });
+        };
+        
+        return <Button
+                size="xs"
+                w={"100%"}
+                leftIcon={ type === 'undo' ? <BiUndo /> : <BiRedo /> }
+                variant={'solid'}
+                colorScheme="minusxGreen"
+                onClick={(event) => urHandler(event, fn, sql)}>
+                    {type === 'undo' ? 'Undo' : 'Redo'}
+                </Button>
     };
-    
-    return <Button
-            size="xs"
-            leftIcon={ type === 'undo' ? <BiUndo /> : <BiRedo /> }
-            variant={'solid'}
-            colorScheme="minusxGreen"
-            onClick={(event) => urHandler(event, fn, sql)}>
-                {type === 'undo' ? 'Undo' : 'Redo'}
-            </Button>
-};
 
-const PreExpanderUndo: React.FC = () => {
-    return (
-        <>
-            {actions.map(action => {
+    const undoRedoArr = actions.map(action => {
                 const { code, oldCode } = action.renderInfo || {}
                 return UNDO_REDO_ACTIONS.includes(action.function.name) && (
-                    <HStack>
-                        {oldCode && <UndoRedo fn={action.function.name} sql={oldCode} type={'undo'}/> }
-                        {code && <UndoRedo fn={action.function.name} sql={code} type={'redo'}/> }
+                    <HStack w={"100%"} justify={"center"} mb={2}>
+                        {oldCode ? <UndoRedo fn={action.function.name} sql={oldCode} type={'undo'}/>:<UndoRedo fn={action.function.name} sql={''} type={'undo'}/>}
+                        {code ? <UndoRedo fn={action.function.name} sql={code} type={'redo'}/> : <UndoRedo fn={action.function.name} sql={''} type={'redo'}/> }
                     </HStack>
                 )
-            })}
-        </>
-    );
-};
-
+            })
 
   const toggleExpand = () => {
     setIsExpanded(!isExpanded)
@@ -151,14 +156,18 @@ const PreExpanderUndo: React.FC = () => {
           p={0}
         >
           <VStack alignItems={"start"} flex={1} spacing={0}>
-            {preExpanderText !== '' && 
+            <VStack>
+            {preExpanderTextArr.length > 0 && 
             // <Text marginBottom={2} borderBottomWidth={1} borderBottomColor={'minusxGreen.800'} style={{ hyphens: 'auto' }} p={2} w={"100%"}>{"Thinking..."}<br/>{preExpanderText}</Text>
-            <Box aria-label="thinking-content" borderBottomWidth={1} mb={1} borderBottomColor={'minusxGreen.800'}>
-            <Markdown content={`Thinking...
-                ${preExpanderText}`}></Markdown>
-                </Box>
-
-            }
+            preExpanderTextArr.map((text, i) => {
+                return (
+                    <Box aria-label="thinking-content" borderBottomWidth={1} mb={1} borderBottomColor={'minusxGreen.800'} w={"100%"}>
+                        <Markdown content={text}></Markdown>
+                        {pageType && pageType == 'sql' && undoRedoArr[i]}
+                    </Box>
+                )
+            })}
+            </VStack>
             <HStack
               aria-label="thinking-header"
               paddingBottom={actions.length && isExpanded ? 1 : 0}
@@ -178,7 +187,6 @@ const PreExpanderUndo: React.FC = () => {
                 { status != 'FINISHED' ? <Spinner size="xs" speed={'0.75s'} color="minusxBW.100" mx={3} /> : null }
             </HStack>
             {/* { isExpanded ? <Text fontSize={"12px"} flexDirection={"row"} display={"flex"} justifyContent={"center"} alignItems={"center"}><MdOutlineTimer/>{latency}{"s"}</Text> : null } */}
-            {pageType && pageType == 'sql' && <PreExpanderUndo />}
             </HStack>
           </VStack>
         </HStack>
diff --git a/web/src/components/common/Markdown.tsx b/web/src/components/common/Markdown.tsx
@@ -3,7 +3,7 @@ import MarkdownComponent from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import './ChatContent.css'
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import { Image, Box, Button, Collapse } from "@chakra-ui/react"
+import { Image, Box, Collapse, Tag, TagLabel, TagLeftIcon, Button } from "@chakra-ui/react"
 import { useSelector } from 'react-redux'
 import { RootState } from '../../state/store'
 import { renderString } from '../../helpers/templatize'
@@ -15,54 +15,34 @@ import type { MetabaseModel } from 'apps/types'
 import { Badge } from "@chakra-ui/react";
 import { CodeBlock } from './CodeBlock';
 import { BiChevronDown, BiChevronRight } from 'react-icons/bi';
+import { BsBarChartFill } from "react-icons/bs";
 
 
 function LinkRenderer(props: any) {
-  return (
+    if (props.children.toString().includes('Card ID')) {
+        return (
+            <a href={props.href} target="_blank" rel="minusxapp">
+                {/* <Button leftIcon={<BsBarChartFill />} size={"xs"} colorScheme={"minusxGreen"}>{props.children}</Button> */}
+                <Tag size='sm' colorScheme='minusxGreen' variant='solid'>
+                    <TagLeftIcon as={BsBarChartFill} />
+                    <TagLabel>{props.children}</TagLabel>
+                </Tag>
+            </a>
+        )
+    } 
+    return (
     <a href={props.href} target="_blank" rel="minusxapp" style={{color: '#5f27cd'}}>
       <u>{props.children}</u>
     </a>
   );
 }
 
-const processRogueParagraphs = (text: string | string[]) => {
-    const badgeTypes = [
-        { tag: '[badge_mx]Sources', label: 'Sources' },
-        { tag: '[badge_mx]Logic', label: 'Logic' },
-        { tag: '[badge_mx]Assumptions', label: 'Assumptions' }
-    ];
-    
-    let processedText = text;
-    let resultElements: React.ReactNode[] = [];
-    
-    for (const badge of badgeTypes) {
-        if (processedText.includes(badge.tag)) {
-          if (typeof processedText === 'string') {
-            const parts = processedText.split(badge.tag);
-            if (parts[0]) resultElements.push(parts[0]);
-            // Add a line break before each badge
-            resultElements.push(<br key={`br-${badge.label}`}></br>);
-            resultElements.push(
-                <Badge key={`${badge.label.toLowerCase()}`} bg="minusxGreen.600" color="white" mx={1}>
-                    {badge.label}
-                </Badge>
-            );
-            processedText = parts[1];
-          }
-        }
-    }
-    
-    // Add any remaining text
-    if (processedText) resultElements.push(processedText);
-    
-    return resultElements;
-};
 
 function ModifiedParagraph(props: any) {
 
     return (
-        <p style={{margin: '3px', wordBreak: 'break-word', overflowWrap: 'break-word', wordWrap: 'break-word', whiteSpace: 'normal'}}>
-            {props.children?.toString().includes('[badge_mx]') ? processRogueParagraphs(props.children) : props.children}
+        <p style={{margin: '3px', wordBreak: 'break-word', overflowWrap: 'break-word', wordWrap: 'break-word', whiteSpace: 'normal', hyphens: 'auto'}}>
+            {props.children}
         </p>
     )
 }
@@ -103,7 +83,7 @@ function ModifiedCode(props: any) {
         return <Badge color={"minusxGreen.600"}>{text.replace('[badge]', '')}</Badge>;
         }
         if (text.startsWith('[badge_mx]')) {
-        return <><br></br><Badge bg={"minusxGreen.600"} color={"white"}>{text.replace('[badge_mx]', '')}</Badge></>;
+        return <><br></br><Badge borderLeftColor={"minusxGreen.600"} borderLeft={"2px solid"} color={"minusxGreen.600"} fontSize={"sm"} mt={2}>{text.replace('[badge_mx]', '')}</Badge><br></br></>;
         }
     }
     
diff --git a/web/src/components/common/TaskUI.tsx b/web/src/components/common/TaskUI.tsx
@@ -106,6 +106,8 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
 
   const credits = useSelector((state: RootState) => state.billing.credits)
   const infoLoaded = useSelector((state: RootState) => state.billing.infoLoaded)
+  const analystMode = useSelector((state: RootState) => state.settings.analystMode)
+
   const creditsExhausted = () => (credits <= 0 && infoLoaded)
   const creditsLow = () => (credits <= LOW_CREDITS_THRESHOLD && infoLoaded)
 
@@ -556,19 +558,30 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
           gap={0}
           alignItems={"center"}
         >
-            <Tooltip hasArrow placement='top' borderRadius={5} width={150}label="Entities can be Base Tables, Metabase Models or MinusX Catalog Entities"><Text mb={0} pb={0} fontSize={"xs"} fontWeight={"bold"} textTransform={"uppercase"} color={"minusxGreen.600"}>{entitiesInContext} {entitiesInContext != 1 ? 'entities' : 'entity' } in context</Text></Tooltip>
-          <Button 
-            size="xs" 
-            colorScheme="minusxGreen" 
-            variant="outline" 
-            fontSize="xs"
-            fontWeight="medium"
-            py={0}
-            px={3}
-            onClick={()=>openDevtoolTab("Context")}
-          >
-            {selectedCatalog.slice(0, 15)}{selectedCatalog.length > 12 ? '...' : ''}
-          </Button>
+          {
+            analystMode ? 
+                <Tooltip hasArrow placement='top' borderRadius={5} width={150}label="Context contains Base Tables, Metabase Models, Cards and Dashboards. MinusX figures out the rest.">
+                    <Text mb={0} pb={0} fontSize={"xs"} fontWeight={"bold"} textTransform={"uppercase"} color={"minusxGreen.600"}>Everything in context</Text>
+                </Tooltip>
+            :
+            <>
+                <Tooltip hasArrow placement='top' borderRadius={5} width={150}label="Entities can be Base Tables, Metabase Models or MinusX Catalog Entities">
+                    <Text mb={0} pb={0} fontSize={"xs"} fontWeight={"bold"} textTransform={"uppercase"} color={"minusxGreen.600"}>{entitiesInContext} {entitiesInContext != 1 ? 'entities' : 'entity' } in context</Text>
+                </Tooltip>
+                <Button 
+                    size="xs" 
+                    colorScheme="minusxGreen" 
+                    variant="outline" 
+                    fontSize="xs"
+                    fontWeight="medium"
+                    py={0}
+                    px={3}
+                    onClick={()=>openDevtoolTab("Context")}
+                >
+                    {selectedCatalog.slice(0, 15)}{selectedCatalog.length > 12 ? '...' : ''}
+                </Button>
+            </>
+          }
         </HStack>
         }
 
diff --git a/web/src/components/devtools/Context.tsx b/web/src/components/devtools/Context.tsx
@@ -13,7 +13,7 @@ import { getParsedIframeInfo } from "../../helpers/origin"
 import { isEmpty, set } from 'lodash';
 import { MetabaseContext } from 'apps/types';
 import { BiBook, BiExpand } from "react-icons/bi";
-import { BsMagic } from "react-icons/bs";
+import { BsMagic, BsRocketTakeoffFill } from "react-icons/bs";
 import { MetabaseAppStateDashboard } from "../../../../apps/src/metabase/helpers/DOMToState";
 import { getLLMResponse } from "../../app/api";
 import _ from 'lodash';
@@ -30,6 +30,7 @@ const CatalogDisplay = ({isInModal, modalOpen}: {isInModal: boolean, modalOpen:
     const currentUserId = useSelector((state: RootState) => state.auth.profile_id)
     const toolContext: MetabaseContext = useAppStore((state) => state.toolContext)
     const viewAllCatalogs = useSelector((state: RootState) => state.settings.viewAllCatalogs)
+    const analystMode = useSelector((state: RootState) => state.settings.analystMode)
     const origin = getParsedIframeInfo().origin
     // Enable to limit catalog visibility
     // const visibleCatalogs = viewAllCatalogs ? availableCatalogs : availableCatalogs.filter((catalog: ContextCatalog) => !catalog.origin || catalog.origin === origin)
@@ -92,8 +93,7 @@ const CatalogDisplay = ({isInModal, modalOpen}: {isInModal: boolean, modalOpen:
             setIsCreatingDashboardToCatalog(false)
         })
     }
-
-    return (
+    const catalogContent = (
         <>
         <Box display="flex" alignItems="center" justifyContent="space-between">
             <Text fontSize="lg" fontWeight="bold">Available Catalogs</Text>
@@ -162,6 +162,69 @@ const CatalogDisplay = ({isInModal, modalOpen}: {isInModal: boolean, modalOpen:
         )}
         </>
     )
+
+    return (
+        <Box position="relative">
+            {catalogContent}
+            {analystMode && (
+                <Box
+                    position="absolute"
+                    top={0}
+                    left={0}
+                    width="100%"
+                    height="100%"
+                    bg="rgba(255, 255, 255, 0.5)"
+                    backdropFilter="blur(4px)"
+                    zIndex={1000}
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                >
+                    <Box
+                        bg="white"
+                        borderRadius="xl"
+                        boxShadow="2xl"
+                        p={8}
+                        mx={6}
+                        maxWidth="400px"
+                        border="1px solid"
+                        borderColor="gray.200"
+                        transform="scale(1)"
+                        transition="all 0.2s ease-in-out"
+                        _hover={{
+                            transform: 'scale(1.02)',
+                            boxShadow: '3xl'
+                        }}
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Box
+                            width="60px"
+                            height="60px"
+                            borderRadius="full"
+                            bg="minusxGreen.100"
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="center"
+                            mb={4}
+                        >
+                            <BsRocketTakeoffFill size={24} color="white" />
+                        </Box>
+                        <Box
+                            fontSize="md"
+                            fontWeight="medium"
+                            color="gray.700"
+                            textAlign="center"
+                            lineHeight="1.6"
+                        >
+                            In Analyst Mode, MinusX automatically figures out what matters with smart search and context awareness — no manual setup required! Like Claude Code, it just works.
+                        </Box>
+                    </Box>
+                </Box>
+            )}
+        </Box>
+    )
 }
 
 
diff --git a/web/src/helpers/utils.ts b/web/src/helpers/utils.ts
