Use embed host for tracing cards as well

Author: ppsreejith

web/src/components/common/ActionStack.tsx

@@ -58,6 +58,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
   const origin = url ? new URL(url).origin : '';
   const thread = useSelector((state: RootState) => state.chat.activeThread)
   const totalThreads = useSelector((state: RootState) => state.chat.threads.length)
+  const embedConfigs = useSelector((state: RootState) => state.configs.embed);
 
   const lastThread = (thread === totalThreads - 1)
 
@@ -83,7 +84,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
   }
   const preExpanderTextArr = actions.map(action => {
     const { text } = action.renderInfo || {}
-    return processModelToUIText(text || '', origin)
+    return processModelToUIText(text || '', origin, embedConfigs)
   }).filter(text => text !== '')
 
 //   const preExpanderText = preExpanderTextArr.length > 1 

web/src/components/common/ChatContent.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { ChatMessageContent } from '../../state/chat/reducer'
 import { Markdown } from './Markdown';
 import { processModelToUIText } from '../../helpers/utils';
 import { getApp } from '../../helpers/app';
+import { RootState } from '../../state/store';
+import { getOrigin, getParsedIframeInfo } from '../../helpers/origin';
 
 
 const useAppStore = getApp().useStore()
@@ -12,16 +15,19 @@ export const ChatContent: React.FC<{content: ChatMessageContent, messageIndex?:
   messageIndex,
   role
 }) => {
-  const url = useAppStore((state) => state.toolContext)?.url || ''
+  // const url = useAppStore((state) => state.toolContext)?.url || ''
+  const origin = getOrigin()
   const pageType = useAppStore((state) => state.toolContext)?.pageType || ''
+  const embedConfigs = useSelector((state: RootState) => state.configs.embed);
+  
   if (content.type == 'DEFAULT') {
     const contentText = ((pageType === 'dashboard' || pageType === 'unknown') && role === 'assistant') ? `${content.text} {{MX_LAST_SQL_URL}}` : content.text;
     return (
       <div>
         {content.images.map(image => (
           <img src={image.url} key={image.url} />
         ))}
-        <Markdown content={processModelToUIText(contentText, url)} messageIndex={messageIndex} />
+        <Markdown content={processModelToUIText(contentText, origin, embedConfigs)} messageIndex={messageIndex} />
       </div>
     )
   } else {

web/src/helpers/utils.ts

@@ -1,5 +1,7 @@
 import { isEqual, some } from "lodash";
 import { getApp } from "./app";
+import { EmbedConfigs } from "../state/configs/reducer";
+import { getParsedIframeInfo } from "./origin";
 
 export async function sleep(ms: number = 0) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -84,7 +86,7 @@ export const getActionTaskLiteLabels = (action: string) => {
 }
 
 
-export const processModelToUIText = (text: string, origin: string): string => {
+export const processModelToUIText = (text: string, origin: string, embedConfigs: EmbedConfigs = {}): string => {
     if (text === ''){
         return ''
     }
@@ -96,9 +98,21 @@ export const processModelToUIText = (text: string, origin: string): string => {
     }
     if (text.includes("card_id:") && (origin != '')) {
         //Replace [card_id:<id>] with link
-        // Replace [card_id:<id>] with markdown link
+        // Replace [card_id:<id>] with markdown link using embed URL logic
         text = text.replace(/\[card_id:(\d+)\]/g, (match, id) => {
-            return `[Card ID: ${id}](${origin}/question/${id})`;
+            const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true';
+            const embedHost = embedConfigs.embed_host;
+            
+            let questionUrl;
+            if (embedHost && isEmbedded) {
+                // Use embed host for embedded mode
+                questionUrl = `${embedHost}/question/${id}`;
+            } else {
+                // Use regular origin
+                questionUrl = `${origin}/question/${id}`;
+            }
+            
+            return `[Card ID: ${id}](${questionUrl})`;
         });
     }
     return text