Seed questions (#323)

* handle overflow

* fix readability on context

* fix rendering on team memory

* helper msg and seed qs work

Author: nuwandavek

web/src/components/common/Chat.tsx

@@ -15,7 +15,7 @@ import { Markdown } from './Markdown';
 import { Tasks } from './Tasks'
 import { TasksLite } from './TasksLite'
 import { getParsedIframeInfo } from '../../helpers/origin'
-import { DemoHelperMessage, DemoSuggestions, getDemoIDX } from './DemoComponents';
+import { DemoHelperMessage, DemoSuggestions } from './DemoComponents';
 import { configs } from '../../constants'
 import { setMinusxMode } from '../../app/rpc'
 
@@ -208,16 +208,6 @@ const Chat: React.FC<ReturnType<typeof addToolInfoToActionPlanMessages>[number]>
 
 const useAppStore = getApp().useStore()
 
-const HelperMessage = () => {
-  const helperMessage = useAppStore((state) => state.helperMessage)
-  if (!helperMessage) {
-    return null
-  }
-  // return <Chat role='user' index={-1} content={{type: 'DEFAULT', text: helperMessage, images: []}} />
-  return <SettingsBlock title={"Welcome"} ariaLabel="welcome-message"><Markdown content={helperMessage}/></SettingsBlock>
-
-}
-
 export const ChatSection = () => {
   const lastMessageRef = useRef<HTMLDivElement>(null);
   const thread = useSelector((state: RootState) => state.chat.activeThread)
@@ -260,7 +250,7 @@ export const ChatSection = () => {
     return returnValue
   })
   const Chats = isEmpty(messagesWithStatus) ?
-    (getDemoIDX(url) == -1 ? <HelperMessage /> : <DemoHelperMessage url={url}/>) :
+    <DemoHelperMessage url={url}/>:
     messagesWithStatus.map((message, key) => (
       <Chat key={key} {...message}/>
     ))

web/src/components/common/DemoComponents.tsx

@@ -4,93 +4,53 @@ import { SettingsBlock } from './SettingsBlock'
 import { Markdown } from './Markdown';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../state/store';
+import { getApp } from '../../helpers/app';
 
 
-const DEMO_SLUGS = [
-    "/138-demo-sql",
-    "/139-demo-mbql",
-    "/1-e-commerce-insights",
-    "/35-us-green-card",
-]
-
-const MESSAGES = [
-    `Hey there! Welcome to the **MinusX SQL Demo**. Try any of the suggested questions, or ask something of your own!
-  
-  ---
-  \`[badge]Protip: \` Click the **[Context](https://docs.minusx.ai/en/articles/11166007-default-tables)** quick action to control the tables MinusX can see!`,
-    `Hey there! Welcome to the **[MinusX Question Builder Demo](https://docs.minusx.ai/en/articles/11637221-metabase-gui-question-builder)**. Try any of the suggested questions, or ask something of your own!
-  
-  ---
-  \`[badge]Protip: \` Click the MinusX logo on the left to toggle the side panel`,
-      `Hey there! Welcome to the **[MinusX Dashboard Demo](https://docs.minusx.ai/en/articles/11496071-q-a-on-dashboards)**. Try any of the suggested questions, or ask something of your own!
-  
-  ---
-  \`[badge]Protip: \` Install MinusX on your own Metabase with a [simple Chrome Extension](https://minusx.ai/chrome-extension/)`,
-  `Welcome to MinusX! Use this chat to ask any questions about the data.
-  
-  ---
-  \`[badge]Protip: \` Install MinusX on your own Metabase with a [simple Chrome Extension](https://minusx.ai/chrome-extension/)`
-]
-
-const MESSAGE_TITLES = [
-    "SQL Demo",
-    "MBQL Demo",
-    "Dashboard Q&A",
-    "Green Cards"
-]
-
-const ALL_SUGGESTIONS = [
-    [
-        "show me monthly category wise sales but i want 2023 and 2024 in separate columns, with a col for % change",
-        "bar plot this!",
-    ],
-    [
-        "filter for this year, sort by orders",
-        "pick top 15?"
-    ],
-    [
-        "what's the total non gizmo order %?"
-    ],
-    [
-        "Show me the top 10th percentile of income for H1Bs",
-        "Show me the top 10 most popular green card visa categories",
-        "How many green card applications were certified in 2024?"
-    ]
-]
-
-export const getDemoIDX = (url: string) => {
-    return DEMO_SLUGS.findIndex(slug => url.includes(slug))
-}
+const useAppStore = getApp().useStore()
 
 export const DemoHelperMessage = ({url}: {url: string}) => {
-  const demoIDX = getDemoIDX(url)
-    if (demoIDX === -1) {
-        return null
-    }
+  const availableAssets = useSelector((state: RootState) => state.settings.availableAssets)
+  const selectedAssetId = useSelector((state: RootState) => state.settings.selectedAssetId)
+  const useTeamMemory = useSelector((state: RootState) => state.settings.useTeamMemory)
+  const selectedAsset = availableAssets.find(asset => asset.slug === selectedAssetId) || 
+                            (availableAssets.length > 0 ? availableAssets[0] : null)
 
-  const message = MESSAGES[demoIDX]
-  return <SettingsBlock title={MESSAGE_TITLES[demoIDX]} ariaLabel="welcome-message"><Markdown content={message}/></SettingsBlock>
+  const teamHelperMessage = (selectedAsset && useTeamMemory && selectedAsset.content?.isActive) ? selectedAsset.content?.helpertexts?.filter(text => text.url === url && text.is_published).map(t => t.text)?.[0] : null
+
+  const helperMessage = useAppStore((state) => state.helperMessage)
+  if (!helperMessage && !teamHelperMessage) {
+    return null
+  }
+  return <SettingsBlock title={"Welcome"} ariaLabel="welcome-message"><Markdown content={teamHelperMessage || helperMessage}/></SettingsBlock>
 
 }
 
 export const DemoSuggestions = ({url}: {url: string}) => {
     const thread = useSelector((state: RootState) => state.chat.activeThread)
     const activeThread = useSelector((state: RootState) => state.chat.threads[thread])
     const taskInProgress = !(activeThread.status == 'FINISHED')
+    const savedQuestions = useSelector((state: RootState) => state.settings.savedQuestions)
+    const showSavedQuestions = useSelector((state: RootState) => state.settings.suggestQueries)
+    const availableAssets = useSelector((state: RootState) => state.settings.availableAssets)
+    const selectedAssetId = useSelector((state: RootState) => state.settings.selectedAssetId)
+    const useTeamMemory = useSelector((state: RootState) => state.settings.useTeamMemory)
+    const selectedAsset = availableAssets.find(asset => asset.slug === selectedAssetId) || 
+                         (availableAssets.length > 0 ? availableAssets[0] : null)
+
+    const personalQuestions = showSavedQuestions ? savedQuestions : []
+    const teamQuestions = (selectedAsset && useTeamMemory && selectedAsset.content?.isActive) ? selectedAsset.content?.questions?.filter(q => q.is_published && q.source_url === url).map(q => q.content) : []
+    const allQuestions = [...personalQuestions, ...teamQuestions]
+        
 
-    const [clickedSuggestions, setClickedSuggestions] = useState<Set<string>>(new Set())
-    const demoIDX = getDemoIDX(url)
-    if (demoIDX === -1) {
-        return null
-    }
 
-    const suggestions = ALL_SUGGESTIONS[demoIDX] || []
+    const [clickedSuggestions, setClickedSuggestions] = useState<Set<string>>(new Set())
 
     const handleSuggestionClick = (suggestion: string) => {
         setClickedSuggestions(prev => new Set([...prev, suggestion]))
     }
 
-    const visibleSuggestions = suggestions.filter(suggestion => !clickedSuggestions.has(suggestion))
+    const visibleSuggestions = allQuestions.filter(suggestion => !clickedSuggestions.has(suggestion))
 
     if (visibleSuggestions.length === 0) {
         return null

web/src/components/common/FilterableTable.tsx

@@ -18,7 +18,8 @@ import {
   Collapse,
   Flex,
   Spacer,
-  HStack
+  HStack,
+  Tooltip
 } from "@chakra-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { FormattedTable, MetabaseModel } from 'apps/types';
@@ -138,7 +139,9 @@ const Node: FC<FixedSizeNodeComponentProps<TreeData>> = ({
           variant="subtle"
           mr={2}
         />
-        <Text fontWeight="bold">schema: <Badge color="minusxGreen.600">{name}</Badge></Text>
+        <Tooltip label={name} hasArrow placement="top">
+          <Text fontWeight="bold">schema: <Badge color="minusxGreen.600">{name.length > 10 ? `${name.slice(0, 10)}...` : name}</Badge></Text>
+        </Tooltip>
         <Spacer />
         <Badge color="minusxGreen.600">{numTables} tables</Badge>
       </Flex>

web/src/components/common/SettingsBlock.tsx

@@ -11,7 +11,7 @@ const SettingsHeader = ({ text }: { text: string }) => (
 )
 
 export const SettingsBlock = ({title, ariaLabel, children}: {title: string, ariaLabel?: string, children: React.ReactNode}) => (
-  <VStack borderRadius={10} bg="minusxBW.300" alignItems={"stretch"} padding={3} aria-label={ariaLabel}>
+  <VStack borderRadius={10} bg="minusxBW.300" alignItems={"stretch"} padding={3} aria-label={ariaLabel} w={"100%"}>
     <SettingsHeader text={title} />
     {children}
   </VStack>

web/src/components/common/TaskUI.tsx

@@ -110,8 +110,6 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
   const analystMode = useSelector((state: RootState) => state.settings.analystMode)
   const proUser = useSelector((state: RootState) => state.billing.isSubscribed)
   const enterpriseUser = useSelector((state: RootState) => state.billing.isEnterpriseCustomer)
-  const savedQuestions = useSelector((state: RootState) => state.settings.savedQuestions)
-  const showSavedQuestions = useSelector((state: RootState) => state.settings.suggestQueries)
 
   const creditsExhausted = () => (credits <= 0 && infoLoaded)
   const creditsLow = () => (credits <= LOW_CREDITS_THRESHOLD && infoLoaded)
@@ -577,10 +575,10 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
         <Thumbnails thumbnails={thumbnails} />
         <UserConfirmation/>
         <Clarification/>
-        {
+        {/* {
             savedQuestions.length > 0 && !taskInProgress && showSavedQuestions &&
             <Suggestions title="Saved Questions" suggestions={savedQuestions} />
-        }
+        } */}
 
         {
             appEnabledStatus.alert.type && 
@@ -742,7 +740,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
                                         <Text fontSize="xs" fontWeight="medium">Team Memory</Text>
                                     </HStack>
                                     <HStack spacing={1} alignItems="center">
-                                        <Text fontSize="xs" color="gray.500">{useTeamMemory ? selectedAssetName : 'Disabled'}</Text>
+                                        <Text fontSize="xs" color="gray.500">{useTeamMemory ? (selectedAssetName.length > 8 ? `${selectedAssetName.slice(0, 8)}...` : selectedAssetName) : 'Disabled'}</Text>
                                         <Icon 
                                             as={useTeamMemory ? BiSolidCheckCircle : BiSolidXCircle}
                                             size={10} 

web/src/components/devtools/TeamMemory.tsx

@@ -11,6 +11,19 @@ import { DisabledOverlay } from '../common/DisabledOverlay';
 import { Markdown } from '../common/Markdown';
 import { Notify } from '../common/Notify';
 
+
+interface Question {
+    content: string;
+    source_url: string;
+    is_published: boolean;
+}
+
+interface HelperText {
+    text: string;
+    url: string;
+    is_published: boolean;
+}
+
 export const TeamMemory: React.FC = () => {
     const tool = getParsedIframeInfo().tool
     const availableAssets = useSelector((state: RootState) => state.settings.availableAssets)
@@ -31,6 +44,7 @@ export const TeamMemory: React.FC = () => {
     const selectedAsset = availableAssets.find(asset => asset.slug === selectedAssetId) || 
                          (availableAssets.length > 0 ? availableAssets[0] : null)
 
+
     if (tool != 'metabase') {
         return <Text>Coming soon!</Text>
     }
@@ -310,22 +324,68 @@ const AssetContentDisplay: React.FC<{ asset: any }> = ({ asset }) => {
                                     <Text fontSize="sm" fontWeight="semibold" color="gray.700">
                                         Saved Questions ({asset.content.questions.length})
                                     </Text>
-                                    {asset.content.questions.map((question: any, index: number) => (
-                                        <HStack 
+                                    {asset.content.questions.map((question: Question, index: number) => (
+                                        <VStack 
                                             key={index}
                                             p={3}
                                             border="1px solid" 
                                             borderColor="gray.200"
                                             borderRadius="md"
-                                            spacing={3}
-                                            justify="flex-start"
+                                            spacing={2}
+                                            align="flex-start"
                                         >
-                                            {question && (
+                                            {question.content && (
                                                 <Text fontSize="sm" fontWeight="medium" color="gray.800">
-                                                    {question}
+                                                    {question.content}
                                                 </Text>
                                             )}
-                                        </HStack>
+                                            {question.source_url && (
+                                                <Text fontSize="xs" color="blue.600" textDecoration="underline">
+                                                    {question.source_url}
+                                                </Text>
+                                            )}
+                                            {question.is_published !== undefined && (
+                                                <Badge colorScheme={question.is_published ? "green" : "orange"} variant="subtle" fontSize="xs">
+                                                    {question.is_published ? "Published" : "Draft"}
+                                                </Badge>
+                                            )}
+                                        </VStack>
+                                    ))}
+                                </VStack>
+                            )}
+
+                        {
+                            asset.content.helpertexts && asset.content.helpertexts.length > 0 && (
+                                <VStack align="stretch" spacing={3} borderTop="1px solid" borderColor="gray.300" pt={5}>
+                                    <Text fontSize="sm" fontWeight="semibold" color="gray.700">
+                                        Helper Texts ({asset.content.helpertexts.length})
+                                    </Text>
+                                    {asset.content.helpertexts.map((helperText: HelperText, index: number) => (
+                                        <VStack 
+                                            key={index}
+                                            p={3}
+                                            border="1px solid" 
+                                            borderColor="gray.200"
+                                            borderRadius="md"
+                                            spacing={2}
+                                            align="flex-start"
+                                        >
+                                            {helperText.text && (
+                                                <Text fontSize="sm" fontWeight="medium" color="gray.800">
+                                                    {helperText.text}
+                                                </Text>
+                                            )}
+                                            {helperText.url && (
+                                                <Text fontSize="xs" color="blue.600" textDecoration="underline">
+                                                    {helperText.url}
+                                                </Text>
+                                            )}
+                                            {helperText.is_published !== undefined && (
+                                                <Badge colorScheme={helperText.is_published ? "green" : "orange"} variant="subtle" fontSize="xs">
+                                                    {helperText.is_published ? "Published" : "Draft"}
+                                                </Badge>
+                                            )}
+                                        </VStack>
                                     ))}
                                 </VStack>
                             )}