@finos/legend-lego 2.0.202 → 2.0.203

package/src/legend-ai/components/LegendAIChat.tsx

@@ -31,7 +31,9 @@ import {
   LikeIcon,
   DislikeIcon,
   ExternalLinkIcon,
+  InfoCircleIcon,
   MarkdownTextViewer,
+  clsx,
 } from '@finos/legend-art';
 import { noop } from '@finos/legend-shared';
 import {
@@ -45,6 +47,7 @@ import {
   LegendAIThinkingStepStatus,
   LegendAIMessageRole,
   LegendAIErrorType,
+  TDSServiceSourceType,
   classifyQuestionIntentFast,
 } from '../LegendAITypes.js';
 import { useLegendAIChatState } from '../stores/LegendAIChatState.js';
@@ -56,6 +59,36 @@ import { buildSuggestedQueries } from './LegendAIChatHelpers.js';
 export const LEGEND_AI_ANCHOR_ID = 'legend-ai-anchor';
 
 const COPY_FEEDBACK_DURATION_MS = 2000;
+const CONTEXT_BANNER_AUTO_DISMISS_MS = 20000;
+
+const LegendAIContextBanner = (props: {
+  message: string;
+  onDismiss: () => void;
+}): React.ReactNode => {
+  const { message, onDismiss } = props;
+
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, CONTEXT_BANNER_AUTO_DISMISS_MS);
+    return (): void => clearTimeout(timer);
+  }, [onDismiss]);
+
+  return (
+    <div className="legend-ai__context-banner">
+      <div className="legend-ai__context-banner-icon">
+        <InfoCircleIcon />
+      </div>
+      <div className="legend-ai__context-banner-text">{message}</div>
+      <button
+        type="button"
+        className="legend-ai__context-banner-close"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+      >
+        <TimesIcon />
+      </button>
+    </div>
+  );
+};
 const METADATA_CONTEXT_HEADING = '### Metadata context';
 const QUERY_ANALYSIS_HEADING = '### Query analysis';
 
@@ -178,6 +211,21 @@ export function renderStepStatusIcon(
   );
 }
 
+/**
+ * Determines whether an execution error message indicates an access/permission
+ * problem (as opposed to a SQL compilation or schema error). Only access-like
+ * errors should show the "Request Access" button.
+ */
+const ACCESS_ERROR_PATTERN =
+  /insufficient privileges|access.*denied|permission.*denied|not authorized|unauthorized|403|entitlement/i;
+
+function looksLikeAccessError(errorMsg: string | undefined): boolean {
+  if (!errorMsg) {
+    return false;
+  }
+  return ACCESS_ERROR_PATTERN.test(errorMsg);
+}
+
 const AssistantMessageView = (props: {
   msg: LegendAIAssistantMessage;
   questionText: string;
@@ -192,6 +240,7 @@ const AssistantMessageView = (props: {
   onFallbackAction?: (messageId: string) => void;
   enghubDocUrl?: string;
   enthubRequestAccessUrl?: string;
+  onRequestAccess?: (accessPointGroupTitle: string) => void;
 }): React.ReactNode => {
   const {
     msg,
@@ -205,6 +254,7 @@ const AssistantMessageView = (props: {
     onFallbackAction,
     enghubDocUrl,
     enthubRequestAccessUrl,
+    onRequestAccess,
   } = props;
 
   const hasPermissionAccessLinks =
@@ -298,7 +348,10 @@ const AssistantMessageView = (props: {
                 {visibleThinkingSteps.map((step) => (
                   <div
                     key={step.id}
-                    className={`legend-ai__thinking-step legend-ai__thinking-step--${step.status}`}
+                    className={clsx(
+                      'legend-ai__thinking-step',
+                      `legend-ai__thinking-step--${step.status}`,
+                    )}
                   >
                     <span className="legend-ai__thinking-step-icon">
                       {renderStepStatusIcon(step.status)}
@@ -396,6 +449,31 @@ const AssistantMessageView = (props: {
                   </div>
                 </div>
               )}
+            {msg.errorType === LegendAIErrorType.EXECUTION &&
+              onRequestAccess &&
+              msg.queriedAccessPointGroups.length > 0 &&
+              looksLikeAccessError(msg.error) && (
+                <div className="legend-ai__permission-error-action">
+                  <span className="legend-ai__permission-error-note">
+                    {msg.queriedAccessPointGroups.length === 1
+                      ? 'You may not have access to this data. You can request access below.'
+                      : `This query uses ${msg.queriedAccessPointGroups.length} access point groups. You can request access to each one below.`}
+                  </span>
+                  <div className="legend-ai__permission-error-btns">
+                    {msg.queriedAccessPointGroups.map((apgTitle) => (
+                      <button
+                        key={apgTitle}
+                        type="button"
+                        className="legend-ai__permission-error-btn legend-ai__permission-error-btn--primary"
+                        onClick={(): void => onRequestAccess(apgTitle)}
+                      >
+                        <ExternalLinkIcon />
+                        <span>Request Access — {apgTitle}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
           </div>
         )}
 
@@ -491,12 +569,11 @@ const AssistantMessageView = (props: {
             <div className="legend-ai__message-feedback-actions">
               <button
                 type="button"
-                className={`legend-ai__message-feedback-btn${
-                  selectedFeedbackRating ===
-                  LegendAIMessageFeedbackRating.THUMBS_UP
-                    ? 'legend-ai__message-feedback-btn--selected'
-                    : ''
-                }`}
+                className={clsx('legend-ai__message-feedback-btn', {
+                  'legend-ai__message-feedback-btn--selected':
+                    selectedFeedbackRating ===
+                    LegendAIMessageFeedbackRating.THUMBS_UP,
+                })}
                 title="Thumbs up"
                 aria-label="Thumbs up"
                 onClick={(): void =>
@@ -508,12 +585,11 @@ const AssistantMessageView = (props: {
               </button>
               <button
                 type="button"
-                className={`legend-ai__message-feedback-btn${
-                  selectedFeedbackRating ===
-                  LegendAIMessageFeedbackRating.THUMBS_DOWN
-                    ? 'legend-ai__message-feedback-btn--selected'
-                    : ''
-                }`}
+                className={clsx('legend-ai__message-feedback-btn', {
+                  'legend-ai__message-feedback-btn--selected':
+                    selectedFeedbackRating ===
+                    LegendAIMessageFeedbackRating.THUMBS_DOWN,
+                })}
                 title="Thumbs down"
                 aria-label="Thumbs down"
                 onClick={(): void =>
@@ -541,10 +617,13 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
     plugin,
     dataProductCoordinates,
     pureExecutionContext,
+    modelContext,
     availableScopes,
     onMessageFeedback,
     onClose,
     onMinimize,
+    onRequestAccess,
+    contextBannerMessage,
   } = props;
   const state = useLegendAIChatState(
     services,
@@ -554,6 +633,7 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
     plugin,
     dataProductCoordinates,
     pureExecutionContext,
+    modelContext,
   );
   const suggestedQueries = useMemo(
     () => buildSuggestedQueries(services, metadata),
@@ -566,8 +646,13 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
       classifyQuestionIntentFast(query, hasServices).intent,
     [hasServices],
   );
+  const isDataProduct = services.some(
+    (s) => s.sourceType === TDSServiceSourceType.ACCESS_POINT,
+  );
+  const [showContextBanner, setShowContextBanner] = useState(true);
+  const dismissBanner = useCallback(() => setShowContextBanner(false), []);
   const hasMessages = state.messages.length > 0;
-  const scopes = availableScopes ?? DEFAULT_SCOPES;
+  const scopes = isDataProduct ? [] : (availableScopes ?? DEFAULT_SCOPES);
   const [feedbackByMessageId, setFeedbackByMessageId] = useState<
     Map<string, LegendAIMessageFeedbackRating>
   >(new Map());
@@ -654,6 +739,13 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
         </div>
       </div>
 
+      {showContextBanner && contextBannerMessage && (
+        <LegendAIContextBanner
+          message={contextBannerMessage}
+          onDismiss={dismissBanner}
+        />
+      )}
+
       <div className="legend-ai__conversation" ref={state.conversationRef}>
         {!hasMessages && (
           <div className="legend-ai__empty-state">
@@ -716,6 +808,7 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
               {...(config.enthubRequestAccessUrl === undefined
                 ? {}
                 : { enthubRequestAccessUrl: config.enthubRequestAccessUrl })}
+              {...(onRequestAccess ? { onRequestAccess } : {})}
               onFallbackAction={(messageId): void =>
                 state.runFallbackAction(messageId)
               }

package/src/legend-ai/components/LegendAIChatHelpers.ts

@@ -14,69 +14,378 @@
  * limitations under the License.
  */
 
-import { PRIMITIVE_TYPE } from '@finos/legend-graph';
-import type {
-  LegendAIProductMetadata,
-  TDSServiceSchema,
-  TDSColumnSchema,
+import {
+  PRECISE_PRIMITIVE_TYPE,
+  PRIMITIVE_TYPE,
+  extractElementNameFromPath,
+} from '@finos/legend-graph';
+import {
+  type LegendAIProductMetadata,
+  type TDSServiceSchema,
+  type TDSColumnSchema,
+  TDSServiceSourceType,
 } from '../LegendAITypes.js';
 
 const MAX_SUGGESTED_QUERIES = 8;
 
-const STRING_TYPES = new Set<string>([PRIMITIVE_TYPE.STRING]);
+const STRING_TYPE_NAMES: ReadonlySet<string> = new Set([
+  PRIMITIVE_TYPE.STRING,
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.VARCHAR),
+]);
 
-const NUMERIC_TYPES = new Set<string>([
+const NUMERIC_TYPE_NAMES: ReadonlySet<string> = new Set([
   PRIMITIVE_TYPE.NUMBER,
   PRIMITIVE_TYPE.INTEGER,
   PRIMITIVE_TYPE.FLOAT,
   PRIMITIVE_TYPE.DECIMAL,
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.TINY_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_TINY_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.SMALL_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_SMALL_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.BIG_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_BIG_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.FLOAT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DOUBLE),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DECIMAL),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.NUMERIC),
 ]);
 
-const DATE_TYPES = new Set<string>([
+const DATE_TYPE_NAMES: ReadonlySet<string> = new Set([
   PRIMITIVE_TYPE.DATE,
   PRIMITIVE_TYPE.STRICTDATE,
   PRIMITIVE_TYPE.DATETIME,
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.STRICTDATE),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DATETIME),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.TIMESTAMP),
 ]);
 
+const ID_COLUMN_PATTERN =
+  /(?:id|key|code|number|guid|kerberos|isin|cusip|account)$/i;
+const CATEGORY_COLUMN_PATTERN =
+  /(?:type|name|region|division|department|unit|status|country|city|title|class|category|group|subdivision|organization|currency|location|sector|calendar|holiday|flag)/i;
+const INFRASTRUCTURE_COLUMN_PATTERN =
+  /^lake_|^__lake|^vlf|^batch|_ap_lh_migration/i;
+const AP_DATE_NAME_PATTERN = /(?:date|dt|time)$/i;
+
 export function isStringColumn(c: TDSColumnSchema): boolean {
-  return STRING_TYPES.has(c.type ?? '') && !c.name.toLowerCase().includes('id');
+  return (
+    STRING_TYPE_NAMES.has(c.type ?? '') && !c.name.toLowerCase().includes('id')
+  );
 }
 
 export function isNumericColumn(c: TDSColumnSchema): boolean {
-  return NUMERIC_TYPES.has(c.type ?? '');
+  return NUMERIC_TYPE_NAMES.has(c.type ?? '');
 }
 
 export function isDateColumn(c: TDSColumnSchema): boolean {
   return (
-    DATE_TYPES.has(c.type ?? '') ||
+    DATE_TYPE_NAMES.has(c.type ?? '') ||
     c.name.toLowerCase().includes('date') ||
     c.name.toLowerCase().includes('time')
   );
 }
 
 function buildDataInsightSuggestions(
-  primary: TDSServiceSchema,
+  svc: TDSServiceSchema,
   stringCol: TDSColumnSchema | undefined,
   numericCol: TDSColumnSchema | undefined,
 ): string[] {
   const result: string[] = [];
+  const dateCol = svc.columns.find(isDateColumn);
+  const allStringCols = svc.columns.filter(isStringColumn);
+  const allNumericCols = svc.columns.filter(isNumericColumn);
+
+  // Aggregation: top-N grouped by a category dimension
+  if (numericCol && stringCol) {
+    result.push(
+      `What are the top 10 ${stringCol.name} values by total ${numericCol.name} in ${svc.title}?`,
+    );
+  }
+
+  // Distribution / breakdown by category
   if (stringCol) {
     result.push(
-      `Show the distinct ${stringCol.name} values from ${primary.title}`,
+      `Show the distribution of records by ${stringCol.name} in ${svc.title}`,
+    );
+  }
+
+  // Date-filtered query
+  if (dateCol && numericCol) {
+    result.push(
+      `Show ${numericCol.name} trends from the last 30 days in ${svc.title}`,
     );
+  } else if (dateCol) {
+    result.push(`Show the most recent 10 records from ${svc.title}`);
   }
 
-  if (numericCol && !stringCol) {
-    result.push(`What is the total ${numericCol.name} in ${primary.title}?`);
+  // Sample-value filter: use an actual sample value for concrete suggestions
+  if (stringCol?.sampleValues) {
+    const firstSample = stringCol.sampleValues.split(',')[0]?.trim();
+    if (firstSample && firstSample.length > 0) {
+      result.push(
+        `Show 10 records from ${svc.title} where ${stringCol.name} is ${firstSample}`,
+      );
+    }
   }
+
+  // Count distinct for a secondary grouping column
+  const secondaryString = allStringCols[1];
+  if (secondaryString) {
+    result.push(`Count records by ${secondaryString.name} in ${svc.title}`);
+  }
+
+  // Sum / average for a secondary numeric
+  const secondaryNumeric = allNumericCols[1];
+  if (secondaryNumeric && stringCol) {
+    result.push(
+      `What is the average ${secondaryNumeric.name} by ${stringCol.name} in ${svc.title}?`,
+    );
+  }
+
+  // Null analysis for nullable columns
+  const nullableCol = svc.columns.find(
+    (c) => c.nullable === true && isStringColumn(c),
+  );
+  if (nullableCol) {
+    result.push(
+      `How many records have missing ${nullableCol.name} in ${svc.title}?`,
+    );
+  }
+
   return result;
 }
 
-function buildMultiServiceSuggestion(services: TDSServiceSchema[]): string[] {
+function isAPCategoryColumn(c: TDSColumnSchema): boolean {
+  return (
+    STRING_TYPE_NAMES.has(c.type ?? '') &&
+    !ID_COLUMN_PATTERN.test(c.name) &&
+    !INFRASTRUCTURE_COLUMN_PATTERN.test(c.name) &&
+    CATEGORY_COLUMN_PATTERN.test(c.name)
+  );
+}
+
+function isAPNumericColumn(c: TDSColumnSchema): boolean {
+  return NUMERIC_TYPE_NAMES.has(c.type ?? '');
+}
+
+function isAPDateColumn(c: TDSColumnSchema): boolean {
+  return DATE_TYPE_NAMES.has(c.type ?? '') || AP_DATE_NAME_PATTERN.test(c.name);
+}
+
+function isAPTextColumn(c: TDSColumnSchema): boolean {
+  return (
+    STRING_TYPE_NAMES.has(c.type ?? '') &&
+    !ID_COLUMN_PATTERN.test(c.name) &&
+    !INFRASTRUCTURE_COLUMN_PATTERN.test(c.name)
+  );
+}
+
+// ─── Access-Point Suggested Queries ─────────────────────────────────────────
+
+function buildCategoryRichSuggestions(
+  primary: TDSServiceSchema,
+  groupCol: TDSColumnSchema,
+  filterCol: TDSColumnSchema | undefined,
+  numericCols: TDSColumnSchema[],
+  categoryCols: TDSColumnSchema[],
+): string[] {
+  const s: string[] = [
+    `How many records are in each ${groupCol.name} in ${primary.title}? Show top 10 by count`,
+  ];
+  if (filterCol) {
+    s.push(
+      `Which ${filterCol.name} values in ${primary.title} have more than 50 records?`,
+    );
+  }
+  if (numericCols[0]) {
+    s.push(
+      `What percentage of records in ${primary.title} belong to each ${groupCol.name}?`,
+    );
+  } else {
+    const secondGroupCol = categoryCols.find((c) => c !== groupCol);
+    if (secondGroupCol) {
+      s.push(
+        `Show the count by ${groupCol.name} and ${secondGroupCol.name} in ${primary.title}`,
+      );
+    }
+  }
+  return s;
+}
+
+function buildNumericHeavySuggestions(
+  primary: TDSServiceSchema,
+  textCols: TDSColumnSchema[],
+  numericCols: TDSColumnSchema[],
+): string[] {
+  const textCol = textCols[0];
+  const numCol = numericCols[0];
+  if (!textCol || !numCol) {
+    return [];
+  }
+  const s = [
+    `What are the top 10 ${textCol.name} values by total ${numCol.name} in ${primary.title}?`,
+  ];
+  if (numericCols[1]) {
+    s.push(
+      `Show the average ${numericCols[1].name} by ${textCol.name} in ${primary.title}`,
+    );
+  }
+  return s;
+}
+
+function buildDateCentricSuggestions(
+  primary: TDSServiceSchema,
+  dateCols: TDSColumnSchema[],
+  textCols: TDSColumnSchema[],
+  categoryCols: TDSColumnSchema[],
+): string[] {
+  const dateCol = dateCols[0];
+  if (!dateCol) {
+    return [];
+  }
+  const textCol = textCols[0] ?? categoryCols[0];
+  if (textCol) {
+    return [
+      `Show records from ${primary.title} for the current month by ${dateCol.name}`,
+    ];
+  }
+  return [
+    `Show the 20 most recent records from ${primary.title} by ${dateCol.name}`,
+  ];
+}
+
+function buildCrossAPSuggestions(
+  primary: TDSServiceSchema,
+  secondary: TDSServiceSchema,
+  currentCount: number,
+): string[] {
+  const primaryColNames = new Set(
+    primary.columns.map((c) => c.name.toLowerCase()),
+  );
+  const s: string[] = [];
+  const uniqueCol = secondary.columns.find(
+    (c) =>
+      !primaryColNames.has(c.name.toLowerCase()) &&
+      !INFRASTRUCTURE_COLUMN_PATTERN.test(c.name) &&
+      (isAPCategoryColumn(c) || isAPTextColumn(c)),
+  );
+  if (uniqueCol) {
+    s.push(
+      `For each record in ${primary.title}, get their ${uniqueCol.name} from ${secondary.title}`,
+    );
+  }
+  const sharedCat =
+    secondary.columns.find(isAPCategoryColumn) ??
+    secondary.columns.find(isAPTextColumn);
+  if (
+    sharedCat &&
+    primaryColNames.has(sharedCat.name.toLowerCase()) &&
+    currentCount + s.length < MAX_SUGGESTED_QUERIES
+  ) {
+    s.push(
+      `Compare the count of records by ${sharedCat.name} between ${primary.title} and ${secondary.title}`,
+    );
+  }
+  return s;
+}
+
+function buildAccessPointSuggestions(
+  accessPoints: TDSServiceSchema[],
+  metadata: LegendAIProductMetadata,
+): string[] {
+  const suggestions: string[] = [
+    `What data does ${metadata.name} offer and how can I use it?`,
+  ];
+  const primary = accessPoints[0];
+  if (!primary) {
+    return suggestions;
+  }
+  const categoryCols = primary.columns.filter(isAPCategoryColumn);
+  const numericCols = primary.columns.filter(isAPNumericColumn);
+  const dateCols = primary.columns.filter(isAPDateColumn);
+  const textCols = primary.columns.filter(isAPTextColumn);
+  const groupCol =
+    categoryCols.find((c) => /division|region|calendar|sector/i.test(c.name)) ??
+    categoryCols[0];
+  const filterCol = categoryCols.find(
+    (c) =>
+      c !== groupCol &&
+      /department|type|title|status|unit|holiday|flag|class|currency/i.test(
+        c.name,
+      ),
+  );
+
+  if (groupCol) {
+    suggestions.push(
+      ...buildCategoryRichSuggestions(
+        primary,
+        groupCol,
+        filterCol,
+        numericCols,
+        categoryCols,
+      ),
+    );
+  } else if (numericCols.length > 0 && textCols.length > 0) {
+    suggestions.push(
+      ...buildNumericHeavySuggestions(primary, textCols, numericCols),
+    );
+  } else if (dateCols.length > 0) {
+    suggestions.push(
+      ...buildDateCentricSuggestions(primary, dateCols, textCols, categoryCols),
+    );
+  } else if (textCols.length > 0) {
+    const col = textCols[0];
+    if (col) {
+      suggestions.push(
+        `Show all distinct ${col.name} values in ${primary.title}`,
+      );
+    }
+  } else {
+    suggestions.push(`Show 10 records from ${primary.title}`);
+  }
+
+  const dateCol0 = dateCols[0];
+  if (dateCol0 && groupCol && suggestions.length < 5) {
+    suggestions.push(
+      `Show the count of records by ${groupCol.name} for each ${dateCol0.name} in ${primary.title}`,
+    );
+  }
+
+  const secondary = accessPoints[1];
+  if (secondary) {
+    suggestions.push(
+      ...buildCrossAPSuggestions(primary, secondary, suggestions.length),
+    );
+  }
+
+  return suggestions.slice(0, MAX_SUGGESTED_QUERIES);
+}
+
+function buildCrossServiceSuggestions(services: TDSServiceSchema[]): string[] {
   if (services.length < 2) {
     return [];
   }
-  return [`Show 10 records from ${services[1]?.title}`];
+  const result: string[] = [];
+  for (let i = 1; i < Math.min(services.length, 3); i++) {
+    const svc = services[i];
+    if (!svc) {
+      continue;
+    }
+    const numCol = svc.columns.find(isNumericColumn);
+    const strCol = svc.columns.find(isStringColumn);
+    if (numCol && strCol) {
+      result.push(
+        `What are the top 5 ${strCol.name} values by ${numCol.name} in ${svc.title}?`,
+      );
+    } else if (strCol) {
+      result.push(`Show the breakdown by ${strCol.name} in ${svc.title}`);
+    } else {
+      result.push(`Show 10 records from ${svc.title}`);
+    }
+  }
+  return result;
 }
 
 export function buildSuggestedQueries(
@@ -95,6 +404,13 @@ export function buildSuggestedQueries(
     ];
   }
 
+  const allAccessPoints = services.every(
+    (s) => s.sourceType === TDSServiceSourceType.ACCESS_POINT,
+  );
+  if (allAccessPoints) {
+    return buildAccessPointSuggestions(services, metadata);
+  }
+
   const primary = services[0];
   if (!primary) {
     return [
@@ -106,12 +422,10 @@ export function buildSuggestedQueries(
   const stringCol = primary.columns.find(isStringColumn);
   const numericCol = primary.columns.find(isNumericColumn);
 
-  const multiSvcSuggestions = buildMultiServiceSuggestion(services);
-
   return [
     ...suggestions,
     `Show 10 records from ${primary.title}`,
     ...buildDataInsightSuggestions(primary, stringCol, numericCol),
-    ...multiSvcSuggestions,
+    ...buildCrossServiceSuggestions(services),
   ].slice(0, MAX_SUGGESTED_QUERIES);
 }

package/src/legend-ai/components/LegendAIChatInput.tsx

@@ -52,7 +52,8 @@ export const LegendAIChatInput = (props: {
     const handleClickOutside = (event: MouseEvent): void => {
       if (
         modelDropdownRef.current &&
-        !modelDropdownRef.current.contains(event.target as Node)
+        event.target instanceof Node &&
+        !modelDropdownRef.current.contains(event.target)
       ) {
         setIsModelDropdownOpen(false);
       }

package/src/legend-ai/components/LegendAIScopeSelector.tsx

@@ -20,6 +20,7 @@ import {
   SearchIcon,
   CheckIcon,
   TimesIcon,
+  clsx,
 } from '@finos/legend-art';
 import type { LegendAIScopeItem } from '../LegendAITypes.js';
 
@@ -70,7 +71,8 @@ export const LegendAIScopeSelector = (props: {
     const handleClickOutside = (e: MouseEvent): void => {
       if (
         dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
+        e.target instanceof Node &&
+        !dropdownRef.current.contains(e.target)
       ) {
         setDropdownOpen(false);
         setSearchText('');
@@ -172,7 +174,10 @@ export const LegendAIScopeSelector = (props: {
                         key={scope.id}
                         type="button"
                         aria-pressed={isSelected}
-                        className={`legend-ai__scope-dropdown-item${isSelected ? 'legend-ai__scope-dropdown-item--selected' : ''}`}
+                        className={clsx('legend-ai__scope-dropdown-item', {
+                          'legend-ai__scope-dropdown-item--selected':
+                            isSelected,
+                        })}
                         onClick={(): void => {
                           onToggleScope(scope);
                           setDropdownOpen(false);