@spteck/react-controls-v2 2.0.14 → 2.0.16

package/dist/index.mjs

@@ -28,13 +28,14 @@ import * as AC from "adaptivecards";
 import { HostConfig as HostConfig$1, AdaptiveCard as AdaptiveCard$1, generateUniqueId as generateUniqueId$1, Input as Input$1, StringProperty as StringProperty$1, Versions as Versions$1, SerializableObjectCollectionProperty as SerializableObjectCollectionProperty$1, Choice as Choice$1, ValueSetProperty as ValueSetProperty$1, BoolProperty as BoolProperty$1, ValidationEvent, Strings as Strings$1, property as property$1, NumProperty as NumProperty$1, EnumProperty as EnumProperty$1, InputTextStyle, ActionProperty as ActionProperty$1, TimeProperty as TimeProperty$1, SerializationContext as SerializationContext$1, ExecuteAction as ExecuteAction$1, SubmitAction as SubmitAction$1, OpenUrlAction as OpenUrlAction$1, CardObjectRegistry as CardObjectRegistry$1, GlobalRegistry as GlobalRegistry$1 } from "adaptivecards";
 import { create } from "nano-css";
 import * as markdown from "markdown-it";
+import markdown__default from "markdown-it";
 import { DatePicker } from "@fluentui/react-datepicker-compat";
 import { formatDateToTimeString, TimePicker as TimePicker$1 } from "@fluentui/react-timepicker-compat";
 import { initializeIcons } from "@fluentui/react/lib/Icons";
 import { Expression } from "adaptive-expressions";
 import { Template } from "adaptivecards-templating";
-import { Chat, ChatMyMessage, ChatMessage } from "@fluentui-contrib/react-chat";
 import getCaretCoordinates from "textarea-caret";
+import { Chat, ChatMyMessage, ChatMessage } from "@fluentui-contrib/react-chat";
 import { Fade } from "@fluentui/react-motion-components-preview";
 var EBreakPoints = /* @__PURE__ */ ((EBreakPoints2) => {
   EBreakPoints2[EBreakPoints2["XXXLarge"] = 1900] = "XXXLarge";
@@ -297,6 +298,311 @@ const useTimeZoneHelper$1 = () => {
     getUserTimeZone
   };
 };
+const useAIAssistantParser = () => {
+  const parseSSEResponse = useCallback((rawResponse, options = {}) => {
+    const { stripMarkdown = true, debug = false } = options;
+    if (!rawResponse || typeof rawResponse !== "string") {
+      return {
+        data: void 0,
+        rawText: "",
+        isJson: false,
+        error: "Invalid input: rawResponse must be a non-empty string"
+      };
+    }
+    try {
+      if (debug) {
+        console.log("[useAIAssistantParser] Raw SSE input (full):", rawResponse);
+        console.log("[useAIAssistantParser] Raw SSE length:", rawResponse.length);
+      }
+      const lines = rawResponse.split("\n");
+      const dataLines = [];
+      let foundData = false;
+      let currentDataBlock = "";
+      let inDataBlock = false;
+      for (let i = 0; i < lines.length; i++) {
+        const line2 = lines[i];
+        if (debug && i < 20) {
+          console.log(`[useAIAssistantParser] Line ${i}:`, JSON.stringify(line2));
+        }
+        if (line2.startsWith("event: done")) {
+          if (currentDataBlock.trim()) {
+            dataLines.push(currentDataBlock.trim());
+            currentDataBlock = "";
+          }
+          break;
+        }
+        if (line2.startsWith("event:") && !line2.startsWith("event: done")) {
+          if (currentDataBlock.trim()) {
+            dataLines.push(currentDataBlock.trim());
+            currentDataBlock = "";
+          }
+          inDataBlock = false;
+          continue;
+        }
+        if (line2.startsWith("data: ")) {
+          const data = line2.substring(6);
+          foundData = true;
+          if (inDataBlock && currentDataBlock) {
+            currentDataBlock += "\n" + data;
+          } else {
+            currentDataBlock = data;
+            inDataBlock = true;
+          }
+        } else if (line2.trim() === "" && !inDataBlock) {
+          continue;
+        } else if (inDataBlock && line2.trim() !== "") {
+          currentDataBlock += "\n" + line2;
+        } else if (line2.trim() === "" && inDataBlock) {
+          const nextLineIndex = i + 1;
+          if (nextLineIndex < lines.length) {
+            const nextLine = lines[nextLineIndex];
+            if (nextLine.startsWith("event:") || nextLineIndex === lines.length - 1) {
+              if (currentDataBlock.trim()) {
+                dataLines.push(currentDataBlock.trim());
+                currentDataBlock = "";
+              }
+              inDataBlock = false;
+            } else if (nextLine.trim() !== "") {
+              currentDataBlock += "\n";
+            } else {
+              if (currentDataBlock.trim()) {
+                dataLines.push(currentDataBlock.trim());
+                currentDataBlock = "";
+              }
+              inDataBlock = false;
+            }
+          }
+        }
+      }
+      if (currentDataBlock.trim()) {
+        dataLines.push(currentDataBlock.trim());
+      }
+      if (debug) {
+        console.log("[useAIAssistantParser] Found", dataLines.length, "data blocks");
+        dataLines.forEach((block, idx) => {
+          console.log(`[useAIAssistantParser] Block ${idx} (length: ${block.length}):`, block);
+        });
+      }
+      let lastValidJson = void 0;
+      let textBlocks = [];
+      for (const dataBlock of dataLines) {
+        let cleanContent = dataBlock.trim();
+        if (stripMarkdown) {
+          cleanContent = cleanContent.replace(/^```json\s*/i, "").replace(/```\s*$/, "");
+          cleanContent = cleanContent.trim();
+        }
+        try {
+          const jsonData = JSON.parse(cleanContent);
+          if (typeof jsonData === "object" && jsonData !== null) {
+            const keys = Object.keys(jsonData);
+            const metadataFields = ["status", "requestId", "tokenCount", "durationMs"];
+            const isMetadataOnly = keys.length > 0 && keys.every((key) => metadataFields.includes(key));
+            if (isMetadataOnly) {
+              if (debug) {
+                console.log("[useAIAssistantParser] Skipping metadata/status-only JSON block:", cleanContent);
+              }
+              continue;
+            }
+          }
+          lastValidJson = jsonData;
+          if (debug) {
+            console.log("[useAIAssistantParser] Successfully parsed data block as JSON");
+          }
+        } catch (e) {
+          if (!cleanContent.match(/^\s*\{\s*["']?status["']?\s*:\s*["']?\w+["']?\s*\}\s*$/)) {
+            textBlocks.push(cleanContent);
+            if (debug) {
+              console.log("[useAIAssistantParser] Data block is text, adding to text blocks");
+            }
+          } else {
+            if (debug) {
+              console.log("[useAIAssistantParser] Skipping status-like text block:", cleanContent);
+            }
+          }
+        }
+      }
+      const lastValidText = textBlocks.filter((block) => block.trim().length > 0).join("\n");
+      if (debug) {
+        console.log("[useAIAssistantParser] Text blocks collected:", textBlocks.length);
+        console.log("[useAIAssistantParser] Filtered text blocks:", textBlocks.filter((block) => block.trim().length > 0).length);
+        console.log("[useAIAssistantParser] Final combined text length:", lastValidText.length);
+        console.log("[useAIAssistantParser] Final combined text:", lastValidText);
+      }
+      if (!foundData || dataLines.length === 0) {
+        return {
+          data: void 0,
+          rawText: "",
+          isJson: false,
+          error: "No data found in SSE response. The server may have returned only status messages without actual data."
+        };
+      }
+      if (lastValidJson !== void 0) {
+        if (debug) {
+          console.log("[useAIAssistantParser] Returning last valid JSON");
+        }
+        return {
+          data: lastValidJson,
+          rawText: lastValidText,
+          isJson: true
+        };
+      }
+      if (lastValidText) {
+        if (debug) {
+          console.log("[useAIAssistantParser] No valid JSON found, returning as text");
+        }
+        return {
+          data: void 0,
+          rawText: lastValidText,
+          isJson: false
+        };
+      }
+      return {
+        data: void 0,
+        rawText: dataLines.join("\n"),
+        isJson: false,
+        error: "Could not parse any data blocks as valid JSON"
+      };
+    } catch (error) {
+      if (debug) {
+        console.error("[useAIAssistantParser] SSE parsing error:", error);
+      }
+      return {
+        data: void 0,
+        rawText: rawResponse,
+        isJson: false,
+        error: error instanceof Error ? error.message : "Failed to parse SSE response"
+      };
+    }
+  }, []);
+  return {
+    parseSSEResponse
+  };
+};
+const useAIAssistant = (config) => {
+  const [response, setResponse] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const abortControllerRef = useRef(null);
+  const { parseSSEResponse } = useAIAssistantParser();
+  const conversationIdRef = useRef(
+    config.conversationId || crypto.randomUUID()
+  );
+  const sendMessage = useCallback(
+    async (message, onProgress) => {
+      var _a3;
+      setResponse("");
+      setError(null);
+      setIsLoading(true);
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      let endpoint = config.endpoint || "http://localhost:7071/api/EventAssistant";
+      if (endpoint.endsWith("/")) {
+        endpoint = endpoint.slice(0, -1);
+      }
+      try {
+        let fullInput = message.input;
+        if (message.history && message.history.length > 0) {
+          const historyContext = message.history.join("\n\n");
+          fullInput = `${historyContext}
+
+${message.input}`;
+        }
+        const payload = {
+          input: fullInput,
+          instructions: message.instructions,
+          mode: void 0,
+          // future extension
+          conversationId: conversationIdRef.current,
+          // Use ref value (stays same across renders)
+          mcpServers: message.mcpServers || config.mcpServers
+        };
+        const fetchResponse = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Accept": "text/event-stream"
+          },
+          body: JSON.stringify(payload),
+          signal: controller.signal
+        });
+        if (!fetchResponse.ok) {
+          let errorDetails = "";
+          try {
+            const errorText = await fetchResponse.text();
+            if (errorText) {
+              errorDetails = ` - ${errorText}`;
+            }
+          } catch {
+          }
+          throw new Error(`HTTP error! status: ${fetchResponse.status}${errorDetails}`);
+        }
+        const reader = (_a3 = fetchResponse.body) == null ? void 0 : _a3.getReader();
+        if (!reader) {
+          throw new Error("No response body");
+        }
+        const decoder = new TextDecoder("utf-8");
+        let done = false;
+        let accumulatedData = "";
+        while (!done) {
+          const { value, done: doneReading } = await reader.read();
+          done = doneReading;
+          if (value) {
+            const chunk = decoder.decode(value, { stream: true });
+            accumulatedData += chunk;
+          }
+        }
+        const parsed = parseSSEResponse(accumulatedData);
+        const finalData = parsed.rawText || "";
+        setResponse(finalData);
+        if (onProgress) {
+          onProgress(finalData);
+        }
+        if (parsed.error) {
+          console.warn("[useAIAssistant] Parser warning:", parsed.error);
+        }
+        return finalData;
+      } catch (err) {
+        let errorMessage = "Error occurred while processing your request.";
+        if (err instanceof Error) {
+          if (err.name === "AbortError") {
+            errorMessage = "Request was cancelled.";
+          } else if (err.message.includes("Rate limit") || err.message.includes("429")) {
+            errorMessage = "Rate limit exceeded. Please wait a moment before sending another message.";
+          } else if (err.message.includes("quota")) {
+            errorMessage = "API quota exceeded. Please try again later.";
+          } else {
+            errorMessage = err.message;
+          }
+        }
+        setError(errorMessage);
+        throw new Error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [config.endpoint, config.mcpServers, parseSSEResponse]
+  );
+  const cancelRequest = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  const resetConversation = useCallback(() => {
+    conversationIdRef.current = crypto.randomUUID();
+    setResponse("");
+    setError(null);
+  }, []);
+  return {
+    response,
+    isLoading,
+    error,
+    sendMessage,
+    cancelRequest,
+    resetConversation,
+    conversationId: conversationIdRef.current
+    // Expose for debugging
+  };
+};
 const useComponentUtils = () => {
   const getCacheKey = React.useCallback((key, uniqueId) => {
     return `${key}${uniqueId}`;
@@ -4355,6 +4661,156 @@ function some(array, predicate) {
 function every(array, predicate) {
   return array.every(predicate);
 }
+var ContentType = /* @__PURE__ */ ((ContentType2) => {
+  ContentType2["HTML"] = "html";
+  ContentType2["MARKDOWN"] = "markdown";
+  ContentType2["ADAPTIVE_CARD"] = "adaptiveCard";
+  ContentType2["PLAIN_TEXT"] = "plainText";
+  return ContentType2;
+})(ContentType || {});
+const isValidJSON = (text) => {
+  try {
+    const parsed = JSON.parse(text);
+    return typeof parsed === "object" && parsed !== null;
+  } catch {
+    return false;
+  }
+};
+const isAdaptiveCard = (text) => {
+  var _a3;
+  try {
+    const parsed = JSON.parse(text);
+    return parsed && typeof parsed === "object" && (parsed.type === "AdaptiveCard" || ((_a3 = parsed.$schema) == null ? void 0 : _a3.includes("adaptivecards.io")));
+  } catch {
+    return false;
+  }
+};
+const isHTML = (text) => {
+  const trimmed = text.trim();
+  const htmlPatterns = [
+    /^<!DOCTYPE\s+html/i,
+    /^<html[\s>]/i,
+    /^<\?xml/i,
+    /<(div|span|p|h[1-6]|table|ul|ol|li|a|img|br|hr|strong|em|b|i)[\s>]/i
+  ];
+  const hasHTMLTags = /<[^>]+>/.test(trimmed);
+  const startsWithTag = /^<[^>]+>/.test(trimmed);
+  const openTags = (trimmed.match(/<(?!\/)[^>]+>/g) || []).length;
+  return htmlPatterns.some((pattern) => pattern.test(trimmed)) || hasHTMLTags && startsWithTag && openTags > 0;
+};
+const isMarkdown = (text) => {
+  const trimmed = text.trim();
+  const markdownPatterns = [
+    /^#{1,6}\s+.+$/m,
+    // Headers
+    /\*\*.*?\*\*/,
+    // Bold
+    /\*.*?\*/,
+    // Italic
+    /__.*?__/,
+    // Bold (underscore)
+    /_.*?_/,
+    // Italic (underscore)
+    /\[.*?\]\(.*?\)/,
+    // Links
+    /^\s*[-*+]\s+/m,
+    // Unordered lists
+    /^\s*\d+\.\s+/m,
+    // Ordered lists
+    /`[^`]+`/,
+    // Inline code
+    /^```/m,
+    // Code blocks
+    /^\|.*\|.*\|$/m,
+    // Tables
+    /^>\s+/m,
+    // Blockquotes
+    /^\s*---\s*$/m
+    // Horizontal rules
+  ];
+  const hasMarkdownSyntax = markdownPatterns.some((pattern) => pattern.test(trimmed));
+  const startsWithHTMLTag = /^<[^>]+>/.test(trimmed);
+  return hasMarkdownSyntax && !startsWithHTMLTag;
+};
+const calculateConfidence = (text, patterns, isNegativeCheck = false) => {
+  const matches = patterns.filter((pattern) => pattern.test(text)).length;
+  const score = matches / patterns.length;
+  return isNegativeCheck ? 1 - score : score;
+};
+const detectContentType = (content) => {
+  var _a3;
+  if (typeof content === "object" && content !== null) {
+    const contentObj = content;
+    if (contentObj.type === "AdaptiveCard" || ((_a3 = contentObj.$schema) == null ? void 0 : _a3.includes("adaptivecards.io"))) {
+      return {
+        type: "adaptiveCard",
+        content,
+        confidence: 1
+      };
+    }
+    content = JSON.stringify(content, null, 2);
+  }
+  const text = content;
+  const trimmed = text.trim();
+  if (!trimmed || trimmed.length < 3) {
+    return {
+      type: "plainText",
+      content: text,
+      confidence: 1
+    };
+  }
+  if (isValidJSON(trimmed) && isAdaptiveCard(trimmed)) {
+    return {
+      type: "adaptiveCard",
+      content: JSON.parse(trimmed),
+      confidence: 1
+    };
+  }
+  if (isHTML(trimmed)) {
+    const htmlPatterns = [
+      /^<!DOCTYPE\s+html/i,
+      /^<html[\s>]/i,
+      /<(div|span|p|h[1-6]|table|ul|ol|li)[\s>]/i
+    ];
+    const confidence = Math.max(
+      0.7,
+      calculateConfidence(trimmed, htmlPatterns)
+    );
+    return {
+      type: "html",
+      content: text,
+      confidence
+    };
+  }
+  if (isMarkdown(trimmed)) {
+    const markdownPatterns = [
+      /^#{1,6}\s+.+$/m,
+      /\*\*.*?\*\*/,
+      /\[.*?\]\(.*?\)/,
+      /^\s*[-*+]\s+/m,
+      /`[^`]+`/,
+      /^```/m,
+      /^\|.*\|.*\|$/m
+    ];
+    const confidence = Math.max(
+      0.6,
+      calculateConfidence(trimmed, markdownPatterns)
+    );
+    return {
+      type: "markdown",
+      content: text,
+      confidence
+    };
+  }
+  return {
+    type: "plainText",
+    content: text,
+    confidence: 0.5
+  };
+};
+const getContentType = (content) => {
+  return detectContentType(content).type;
+};
 const useCardStyles = (props) => {
   const { styles: styles2 } = props;
   const { getBaseStyles } = useComponentUtils();
@@ -5136,7 +5592,7 @@ const Carousel = (props) => {
     }
   ) });
 };
-const useStyles$6 = () => {
+const useStyles$8 = () => {
   return {
     card: css$1({
       position: "absolute",
@@ -5154,7 +5610,7 @@ const Popup = ({
 }) => {
   const popupRef = useRef(null);
   const [position2, setPosition] = useState(anchorPoint);
-  const styles2 = useStyles$6();
+  const styles2 = useStyles$8();
   useLayoutEffect(() => {
     if (popupRef.current) {
       const rect = popupRef.current.getBoundingClientRect();
@@ -5311,7 +5767,7 @@ const RenderLabel = (props) => {
     /* @__PURE__ */ jsx$2(Caption1, { style: { color: tokens.colorPaletteRedForeground1 }, children: isRequired ? " *" : "" })
   ] }) });
 };
-const useStyles$5 = makeStyles({
+const useStyles$7 = makeStyles({
   root: {
     display: "flex",
     justifyContent: "center",
@@ -5326,7 +5782,7 @@ const useStyles$5 = makeStyles({
 });
 const RenderSpinner = (props) => {
   const { size, label, labelPosition, style, className } = props;
-  const styles2 = useStyles$5();
+  const styles2 = useStyles$7();
   return /* @__PURE__ */ jsx$2("div", { className: styles2.root, children: /* @__PURE__ */ jsx$2(
     Spinner,
     {
@@ -6016,7 +6472,7 @@ const defaultEventDetailsPopoverStrings = {
   details: "Details"
 };
 const PADDING_LEFT = "32px";
-const useStyles$4 = (_props) => {
+const useStyles$6 = (_props) => {
   const styles2 = {
     banner: css$1({
       display: "flex",
@@ -6048,7 +6504,7 @@ const RenderProperty = ({ fieldLabel, fieldValue, icon }) => {
 const EventDetailsPopover = (props) => {
   const { event, strings: strings2 = defaultEventDetailsPopoverStrings } = props;
   const { title, start, end, location, category, attendees, weblink } = event;
-  const { styles: styles2 } = useStyles$4();
+  const { styles: styles2 } = useStyles$6();
   const { formatDate } = useUtils();
   const formatedStartDate = formatDate(start, "PPp");
   const formatedEndDate = formatDate(end, "PPp");
@@ -8855,7 +9311,7 @@ const DataGridV2 = React.forwardRef((props, ref) => {
 DataGridV2.displayName = "DataGridV2";
 const DEFAULT_MIN_WIDTH = 200;
 const DEFAULT_MIN_HEIGHT = 200;
-const useStyles$3 = makeStyles({
+const useStyles$5 = makeStyles({
   dialog: {
     width: "100%",
     height: "100%",
@@ -8869,7 +9325,7 @@ const useStyles$3 = makeStyles({
 });
 const RenderDialog = (props) => {
   const { isOpen, dialogTitle, dialogActions, children, maxWidth, className, minHeight, minWidth, maxHeight } = props;
-  const styles2 = useStyles$3();
+  const styles2 = useStyles$5();
   if (!isOpen) return /* @__PURE__ */ jsx$2(Fragment, {});
   return /* @__PURE__ */ jsx$2(Dialog, { open: isOpen, modalType: "modal", children: /* @__PURE__ */ jsxs$1(
     DialogSurface,
@@ -9211,7 +9667,7 @@ const ShowMessage = (props) => {
     children
   ] }) });
 };
-const useStyles$2 = () => {
+const useStyles$4 = () => {
   return {
     container: css$1({
       display: "flex",
@@ -9244,7 +9700,7 @@ const CustomControlBar = ({
   renderControl,
   theme
 }) => {
-  const styles2 = useStyles$2();
+  const styles2 = useStyles$4();
   const onItemSelect = React.useCallback(
     (itemId) => {
       if (onSelectedItem) {
@@ -25338,6 +25794,336 @@ const chatReducer = (state, action) => {
       return state;
   }
 };
+const useStyles$3 = makeStyles({
+  markdown: {
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground1,
+    "& p": {
+      marginTop: "0",
+      marginBottom: tokens.spacingVerticalM
+    },
+    "& h1, & h2, & h3, & h4, & h5, & h6": {
+      marginTop: tokens.spacingVerticalL,
+      marginBottom: tokens.spacingVerticalM,
+      fontWeight: tokens.fontWeightSemibold
+    },
+    "& h1": {
+      fontSize: tokens.fontSizeBase500
+    },
+    "& h2": {
+      fontSize: tokens.fontSizeBase400
+    },
+    "& h3": {
+      fontSize: tokens.fontSizeBase300
+    },
+    "& ul, & ol": {
+      marginTop: "0",
+      marginBottom: tokens.spacingVerticalM,
+      paddingLeft: tokens.spacingHorizontalXXL
+    },
+    "& li": {
+      marginBottom: tokens.spacingVerticalXS
+    },
+    "& code": {
+      fontFamily: tokens.fontFamilyMonospace,
+      fontSize: tokens.fontSizeBase200,
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: "2px 4px",
+      borderRadius: tokens.borderRadiusSmall
+    },
+    "& pre": {
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: tokens.spacingVerticalM,
+      borderRadius: tokens.borderRadiusMedium,
+      overflowX: "auto",
+      marginBottom: tokens.spacingVerticalM
+    },
+    "& pre code": {
+      backgroundColor: "transparent",
+      padding: "0"
+    },
+    "& table": {
+      borderCollapse: "collapse",
+      width: "100%",
+      marginBottom: tokens.spacingVerticalM,
+      border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    "& thead": {
+      backgroundColor: tokens.colorNeutralBackground3
+    },
+    "& th": {
+      padding: tokens.spacingVerticalS + " " + tokens.spacingHorizontalM,
+      textAlign: "left",
+      fontWeight: tokens.fontWeightSemibold,
+      borderBottom: `2px solid ${tokens.colorNeutralStroke1}`,
+      borderRight: `1px solid ${tokens.colorNeutralStroke2}`
+    },
+    "& td": {
+      padding: tokens.spacingVerticalS + " " + tokens.spacingHorizontalM,
+      borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+      borderRight: `1px solid ${tokens.colorNeutralStroke2}`
+    },
+    "& tr:last-child td": {
+      borderBottom: "none"
+    },
+    "& th:last-child, & td:last-child": {
+      borderRight: "none"
+    },
+    "& blockquote": {
+      borderLeft: `4px solid ${tokens.colorBrandStroke1}`,
+      paddingLeft: tokens.spacingHorizontalM,
+      marginLeft: "0",
+      marginBottom: tokens.spacingVerticalM,
+      color: tokens.colorNeutralForeground2
+    },
+    "& a": {
+      color: tokens.colorBrandForeground1,
+      textDecoration: "none",
+      ":hover": {
+        textDecoration: "underline"
+      }
+    },
+    "& hr": {
+      border: "none",
+      borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+      marginTop: tokens.spacingVerticalL,
+      marginBottom: tokens.spacingVerticalL
+    }
+  }
+});
+const MarkdownRenderer = ({
+  content,
+  className
+}) => {
+  const styles2 = useStyles$3();
+  const [html, setHtml] = React.useState("");
+  React.useEffect(() => {
+    const md = new markdown__default({
+      html: false,
+      // Disable HTML tags for security
+      linkify: true,
+      // Auto-convert URLs to links
+      typographer: true,
+      // Enable smartquotes and other typographic replacements
+      breaks: true
+      // Convert line breaks to <br>
+    });
+    const rendered = md.render(content);
+    setHtml(rendered);
+  }, [content]);
+  return /* @__PURE__ */ jsx$2(
+    "div",
+    {
+      className: `${styles2.markdown} ${className || ""}`,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+};
+const useStyles$2 = makeStyles({
+  plainText: {
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground1,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  },
+  htmlContent: {
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground1,
+    "& p": {
+      marginTop: "0",
+      marginBottom: tokens.spacingVerticalM
+    },
+    "& h1, & h2, & h3, & h4, & h5, & h6": {
+      marginTop: tokens.spacingVerticalL,
+      marginBottom: tokens.spacingVerticalM,
+      fontWeight: tokens.fontWeightSemibold
+    },
+    "& table": {
+      borderCollapse: "collapse",
+      width: "100%",
+      marginBottom: tokens.spacingVerticalM
+    },
+    "& th, & td": {
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      padding: tokens.spacingHorizontalS,
+      textAlign: "left"
+    },
+    "& th": {
+      backgroundColor: tokens.colorNeutralBackground3,
+      fontWeight: tokens.fontWeightSemibold
+    }
+  },
+  debugBadge: {
+    display: "inline-block",
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    marginBottom: tokens.spacingVerticalS,
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderRadius: tokens.borderRadiusSmall,
+    fontSize: tokens.fontSizeBase200,
+    fontFamily: tokens.fontFamilyMonospace,
+    color: tokens.colorNeutralForeground2
+  },
+  adaptiveCardWrapper: {
+    width: "100%"
+  }
+});
+const ContentRenderer = ({
+  content,
+  forceType,
+  onTypeDetected,
+  context,
+  theme = AdaptiveCardHostThemeType.SharePoint,
+  onAdaptiveCardAction,
+  className,
+  debug = false
+}) => {
+  const styles2 = useStyles$2();
+  const [detectionResult, setDetectionResult] = React.useState(null);
+  React.useEffect(() => {
+    if (React.isValidElement(content)) {
+      return;
+    }
+    if (typeof content !== "string" && typeof content !== "object") {
+      return;
+    }
+    const result = detectContentType(content);
+    setDetectionResult(result);
+    if (onTypeDetected) {
+      onTypeDetected(result);
+    }
+  }, [content, onTypeDetected]);
+  if (React.isValidElement(content)) {
+    return /* @__PURE__ */ jsx$2(Fragment, { children: content });
+  }
+  const contentType = forceType || (detectionResult == null ? void 0 : detectionResult.type);
+  const actualContent = (detectionResult == null ? void 0 : detectionResult.content) || content;
+  const renderDebugBadge = () => {
+    if (!debug || !detectionResult) return null;
+    return /* @__PURE__ */ jsxs$1("div", { className: styles2.debugBadge, children: [
+      "Type: ",
+      detectionResult.type,
+      " | Confidence: ",
+      (detectionResult.confidence * 100).toFixed(0),
+      "%"
+    ] });
+  };
+  const renderContent = () => {
+    switch (contentType) {
+      case ContentType.MARKDOWN:
+        return /* @__PURE__ */ jsx$2(
+          MarkdownRenderer,
+          {
+            content: actualContent,
+            className
+          }
+        );
+      case ContentType.HTML:
+        return /* @__PURE__ */ jsx$2(
+          "div",
+          {
+            className: `${styles2.htmlContent} ${className || ""}`,
+            dangerouslySetInnerHTML: { __html: actualContent }
+          }
+        );
+      case ContentType.ADAPTIVE_CARD:
+        return /* @__PURE__ */ jsx$2("div", { className: `${styles2.adaptiveCardWrapper} ${className || ""}`, children: /* @__PURE__ */ jsx$2(
+          AdaptiveCardHost,
+          {
+            card: typeof actualContent === "string" ? JSON.parse(actualContent) : actualContent,
+            context,
+            themeType: theme,
+            onInvokeAction: onAdaptiveCardAction || (() => {
+            }),
+            onError: (error) => console.error("Adaptive Card Error:", error)
+          }
+        ) });
+      case ContentType.PLAIN_TEXT:
+      default:
+        return /* @__PURE__ */ jsx$2("div", { className: `${styles2.plainText} ${className || ""}`, children: actualContent });
+    }
+  };
+  return /* @__PURE__ */ jsxs$1(Fragment, { children: [
+    renderDebugBadge(),
+    renderContent()
+  ] });
+};
+const ChatList = React.forwardRef((props, ref) => {
+  const { messages, context } = props;
+  const cleanMessageContent = (content) => {
+    if (React.isValidElement(content)) {
+      return content;
+    }
+    if (typeof content === "string") {
+      let cleaned = content.replace(/\{"status"\s*:\s*"executing"\}/gi, "").replace(/\{'status'\s*:\s*'executing'\}/gi, "").trim();
+      return cleaned;
+    }
+    return content;
+  };
+  const scrollableContainerStyle = css$1({
+    flex: "1 1 0",
+    overflowY: "auto",
+    overflowX: "hidden",
+    padding: "16px",
+    paddingRight: "25px",
+    // Custom scrollbar styles
+    "::-webkit-scrollbar": {
+      width: "6px"
+    },
+    "::-webkit-scrollbar-track": {
+      background: tokens.colorNeutralBackground4,
+      borderRadius: "10px"
+    },
+    "::-webkit-scrollbar-thumb": {
+      background: tokens.colorBrandStroke2Hover,
+      borderRadius: "10px"
+    },
+    "::-webkit-scrollbar-thumb:hover": {
+      background: tokens.colorNeutralStroke2
+    }
+  });
+  const chatContentStyle = css$1({
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    paddingRight: "30px"
+    // Space for message status indicators
+  });
+  return /* @__PURE__ */ jsx$2("div", { ref, className: scrollableContainerStyle, children: /* @__PURE__ */ jsx$2(Chat, { className: chatContentStyle, children: messages.map(
+    (message, index) => message.senderName === "User" ? /* @__PURE__ */ jsx$2(
+      ChatMyMessage,
+      {
+        status: message.status,
+        author: message.senderName,
+        children: cleanMessageContent(message.message)
+      },
+      index
+    ) : /* @__PURE__ */ jsx$2(
+      ChatMessage,
+      {
+        decoration: message.status === "failed" ? "important" : void 0,
+        avatar: /* @__PURE__ */ jsx$2(
+          Icon,
+          {
+            icon: "carbon:ibm-consulting-advantage-assistant",
+            width: "32",
+            height: "32",
+            style: { color: tokens.colorBrandBackground }
+          }
+        ),
+        author: message.senderName,
+        children: /* @__PURE__ */ jsx$2(ContentRenderer, { content: cleanMessageContent(message.message), context })
+      },
+      index
+    )
+  ) }) });
+});
+ChatList.displayName = "ChatList";
 const useAIAssistantStyles = () => {
   return {
     container: css$1({
@@ -25357,10 +26143,7 @@ const useAIAssistantStyles = () => {
       display: "flex",
       flexDirection: "column",
       gap: "10px",
-      padding: "10px",
-      overflowY: "auto",
-      overflowX: "hidden",
-      height: "100%",
+      paddingRight: "30px",
       width: "100%",
       // Scrollbar styles
       // Scrollbar styles
@@ -25403,184 +26186,31 @@ const useAIAssistantStyles = () => {
     input: css$1({
       width: "100%",
       fontSize: "14px"
+    }),
+    // AIAssistant main container
+    aiAssistantContainer: css$1({
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      boxSizing: "border-box"
+    }),
+    // AIAssistant input wrapper
+    aiAssistantInputContainer: css$1({
+      flex: "0 0 auto",
+      padding: "16px",
+      paddingBottom: "20px",
+      borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+      backgroundColor: tokens.colorNeutralBackground1,
+      boxSizing: "border-box"
     })
   };
 };
-function useStreamRequest() {
-  const [data, setData] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const abortControllerRef = useRef(null);
-  const sendRequest = useCallback(
-    async (endpoint, payload, options, onChunk) => {
-      var _a3, _b2, _c2, _d2;
-      setData("");
-      setError(null);
-      setIsLoading(true);
-      const controller = new AbortController();
-      abortControllerRef.current = controller;
-      try {
-        const response = await fetch(endpoint, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-          signal: controller.signal,
-          ...options
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const reader = (_a3 = response.body) == null ? void 0 : _a3.getReader();
-        if (!reader) {
-          throw new Error("No response body");
-        }
-        const decoder = new TextDecoder("utf-8");
-        let done = false;
-        let accumulatedData = "";
-        let buffer = "";
-        while (!done) {
-          const { value, done: doneReading } = await reader.read();
-          done = doneReading;
-          if (value) {
-            const chunk = decoder.decode(value, { stream: true });
-            buffer += chunk;
-            const isSSE = buffer.includes("event:") || buffer.includes("data:");
-            if (isSSE) {
-              const lines = buffer.split("\n");
-              buffer = lines.pop() || "";
-              let currentEvent = "";
-              let currentData = "";
-              for (const line2 of lines) {
-                if (line2.startsWith("event:")) {
-                  currentEvent = line2.substring(6).trim();
-                } else if (line2.startsWith("data:")) {
-                  const dataContent = line2.substring(5).trim();
-                  if (currentData && dataContent) {
-                    currentData += "\n" + dataContent;
-                  } else {
-                    currentData = dataContent;
-                  }
-                } else if (line2 === "") {
-                  if (!currentData) {
-                    currentEvent = "";
-                    currentData = "";
-                    continue;
-                  }
-                  if (currentEvent === "error") {
-                    try {
-                      const errorData = JSON.parse(currentData);
-                      const errorMessage = errorData.message || "An error occurred";
-                      if (errorMessage.includes("429") || errorMessage.toLowerCase().includes("rate limit")) {
-                        throw new Error("Rate limit exceeded. Please wait a moment and try again.");
-                      } else if (errorMessage.includes("quota")) {
-                        throw new Error("API quota exceeded. Please try again later.");
-                      } else {
-                        throw new Error(errorMessage);
-                      }
-                    } catch (parseError) {
-                      if (parseError instanceof Error && parseError.message.includes("Rate limit")) {
-                        throw parseError;
-                      }
-                      throw new Error(currentData || "An error occurred during streaming");
-                    }
-                  } else if (currentEvent === "done") {
-                    done = true;
-                  } else if (currentEvent === "tool") {
-                  } else {
-                    try {
-                      const parsed = JSON.parse(currentData);
-                      if (parsed.status && Object.keys(parsed).length === 1) {
-                      } else if (parsed.content) {
-                        const contentStr = typeof parsed.content === "string" ? parsed.content : JSON.stringify(parsed.content, null, 2);
-                        accumulatedData += contentStr;
-                        setData(accumulatedData);
-                        if (onChunk) {
-                          onChunk(contentStr);
-                        }
-                      } else {
-                        const formattedJson = JSON.stringify(parsed, null, 2);
-                        accumulatedData += formattedJson + "\n";
-                        setData(accumulatedData);
-                        if (onChunk) {
-                          onChunk(formattedJson);
-                        }
-                      }
-                    } catch {
-                      accumulatedData += currentData + "\n";
-                      setData(accumulatedData);
-                      if (onChunk) {
-                        onChunk(currentData);
-                      }
-                    }
-                  }
-                  currentEvent = "";
-                  currentData = "";
-                }
-              }
-            } else {
-              const lines = buffer.split("\n");
-              buffer = lines.pop() || "";
-              for (const line2 of lines) {
-                if (line2.trim()) {
-                  try {
-                    const parsed = JSON.parse(line2);
-                    if ((_d2 = (_c2 = (_b2 = parsed.choices) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.delta) == null ? void 0 : _d2.content) {
-                      const content = parsed.choices[0].delta.content;
-                      accumulatedData += content;
-                      setData(accumulatedData);
-                      if (onChunk) {
-                        onChunk(content);
-                      }
-                    } else if (parsed.content) {
-                      accumulatedData += parsed.content;
-                      setData(accumulatedData);
-                      if (onChunk) {
-                        onChunk(parsed.content);
-                      }
-                    } else if (parsed.done === true || parsed.type === "done") {
-                      done = true;
-                    } else if (!parsed.status) {
-                      accumulatedData += line2;
-                      setData(accumulatedData);
-                      if (onChunk) {
-                        onChunk(line2);
-                      }
-                    }
-                  } catch {
-                    accumulatedData += line2 + "\n";
-                    setData(accumulatedData);
-                    if (onChunk) {
-                      onChunk(line2 + "\n");
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") {
-          setError("Request aborted");
-          throw err;
-        } else {
-          setError(err instanceof Error ? err.message : "Error occurred");
-          throw err;
-        }
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    []
-  );
-  const cancelRequest = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-  }, []);
-  return { data, isLoading, error, sendRequest, cancelRequest };
-}
 const getTimestamp = (timezone, currentUICultureName) => {
-  const { getFormatRelative } = useTimeZoneHelper(timezone, currentUICultureName);
+  const { getFormatRelative } = useTimeZoneHelper(
+    timezone,
+    currentUICultureName
+  );
   return getFormatRelative(/* @__PURE__ */ new Date());
 };
 const AIAssistant = (props) => {
@@ -25603,14 +26233,23 @@ const AIAssistant = (props) => {
   });
   const { messages, inputText, isLoading, error, isRunning } = state;
   const chatHistory = React.useRef([]);
-  const styles2 = useAIAssistantStyles();
   const chatListRef = React.useRef(null);
-  const { sendRequest, cancelRequest, error: streamError } = useStreamRequest();
+  const styles2 = useAIAssistantStyles();
+  const { sendMessage, cancelRequest } = useAIAssistant({
+    endpoint: openAIConfig == null ? void 0 : openAIConfig.endpoint,
+    mcpServers: openAIConfig == null ? void 0 : openAIConfig.mcpServers
+  });
   const forceScrollToBottom = React.useCallback(() => {
     if (chatListRef.current) {
       chatListRef.current.scrollTop = chatListRef.current.scrollHeight - chatListRef.current.clientHeight;
     }
   }, []);
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      forceScrollToBottom();
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, [messages, forceScrollToBottom]);
   React.useEffect(() => {
     var _a3, _b2;
     const welcomeMessage = {
@@ -25653,63 +26292,49 @@ const AIAssistant = (props) => {
       type: "ADD_ASSISTANT_MESSAGE",
       message: assistantMessage
     });
-    forceScrollToBottom();
-    let currentResponse = "";
-    const endpoint = (openAIConfig == null ? void 0 : openAIConfig.endpoint) || "http://localhost:7071/api/EventAssistant";
-    const payload = {
-      instructions: instrutions,
-      input: currentInput,
-      timezone,
-      locale: locale2,
-      history: chatHistory.current,
-      mcpServers: openAIConfig == null ? void 0 : openAIConfig.mcpServers
-    };
     try {
-      await sendRequest(endpoint, payload, void 0, (chunk) => {
-        currentResponse += chunk;
+      const aiResponse = await sendMessage({
+        instructions: instrutions,
+        input: currentInput,
+        timezone,
+        locale: locale2,
+        history: chatHistory.current,
+        mcpServers: openAIConfig == null ? void 0 : openAIConfig.mcpServers
+      });
+      if (onResponse) {
+        const response = await onResponse(aiResponse);
+        const { message, status } = response;
         dispatch({
           type: "UPDATE_LAST_ASSISTANT_MESSAGE",
           message: {
             ...assistantMessage,
-            message: currentResponse,
+            message: message ? message : aiResponse,
+            status: status ? status : "received"
+          }
+        });
+      } else {
+        dispatch({
+          type: "UPDATE_LAST_ASSISTANT_MESSAGE",
+          message: {
+            ...assistantMessage,
+            message: aiResponse,
             status: "received"
           }
         });
-        if (onResponse) {
-          onResponse(currentResponse).then((response) => {
-            const { message, status } = response;
-            dispatch({
-              type: "UPDATE_LAST_ASSISTANT_MESSAGE",
-              message: {
-                ...assistantMessage,
-                message: message ? message : currentResponse,
-                status: status ? status : "received"
-              }
-            });
-          }).catch((err) => {
-            console.error("onResponse callback error:", err);
-          });
-        }
-      });
-      dispatch({
-        type: "UPDATE_LAST_ASSISTANT_MESSAGE",
-        message: {
-          ...assistantMessage,
-          message: currentResponse,
-          status: "received"
-        }
-      });
+      }
       dispatch({
         type: "SET_IS_RUNNING"
       });
+      chatHistory.current.push(currentInput);
+      chatHistory.current.push(aiResponse);
     } catch (err) {
       console.error("Error during streaming:", err);
       let errorMessage = "Error occurred while processing your request.";
       if (err instanceof Error) {
         if (err.message.includes("Rate limit") || err.message.includes("429")) {
-          errorMessage = "⚠️ Rate limit exceeded. Please wait a moment before sending another message.";
+          errorMessage = "Rate limit exceeded. Please wait a moment before sending another message.";
         } else if (err.message.includes("quota")) {
-          errorMessage = "⚠️ API quota exceeded. Please try again later.";
+          errorMessage = "API quota exceeded. Please try again later.";
         } else if (err.message.includes("abort")) {
           errorMessage = "Request was cancelled.";
         } else {
@@ -25726,9 +26351,6 @@ const AIAssistant = (props) => {
       });
       dispatch({ type: "SET_IS_RUNNING" });
     }
-    chatHistory.current.push(currentInput);
-    chatHistory.current.push(currentResponse);
-    forceScrollToBottom();
   }, [
     inputText,
     instrutions,
@@ -25736,8 +26358,9 @@ const AIAssistant = (props) => {
     onResponse,
     openAIConfig,
     timezone,
-    sendRequest,
-    streamError
+    sendMessage,
+    forceScrollToBottom,
+    context
   ]);
   const handleInputChange = React.useCallback((value) => {
     dispatch({ type: "SET_INPUT", inputText: value });
@@ -25754,38 +26377,9 @@ const AIAssistant = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs$1("div", { id: "aiAssistant", className: styles2.chatAIAssistantRoot, children: [
-    /* @__PURE__ */ jsx$2(Chat, { className: styles2.chatList, ref: chatListRef, children: messages.map(
-      (message, index) => message.senderName === "User" ? /* @__PURE__ */ jsx$2(
-        ChatMyMessage,
-        {
-          status: message.status,
-          author: message.senderName,
-          timestamp: message.timeStamp,
-          children: message.message
-        },
-        index
-      ) : /* @__PURE__ */ jsx$2(
-        ChatMessage,
-        {
-          decoration: message.status === "failed" ? "important" : void 0,
-          avatar: /* @__PURE__ */ jsx$2(
-            Icon,
-            {
-              icon: "carbon:ibm-consulting-advantage-assistant",
-              width: "32",
-              height: "32",
-              style: { color: tokens.colorBrandBackground }
-            }
-          ),
-          author: message.senderName,
-          timestamp: message.timeStamp,
-          children: message.message
-        },
-        index
-      )
-    ) }),
-    /* @__PURE__ */ jsx$2("div", { className: styles2.inputContainer, children: /* @__PURE__ */ jsx$2(
+  return /* @__PURE__ */ jsxs$1("div", { className: styles2.aiAssistantContainer, children: [
+    /* @__PURE__ */ jsx$2(ChatList, { ref: chatListRef, messages, context }),
+    /* @__PURE__ */ jsx$2("div", { className: styles2.aiAssistantInputContainer, children: /* @__PURE__ */ jsx$2(
       ChatInputWithMensions,
       {
         context,
@@ -27288,7 +27882,10 @@ export {
   ChatInput,
   ChatInputWithMensions,
   ChatInputWithMensionsV1,
+  ChatList,
   Container$1 as Container,
+  ContentRenderer,
+  ContentType,
   CustomControlBar,
   DataGrid,
   DataGridV2,
@@ -27304,6 +27901,7 @@ export {
   ListItemActivityMessage,
   LivePersona,
   LogLevel,
+  MarkdownRenderer,
   Mensions,
   MensionsExample,
   Popup,
@@ -27334,9 +27932,11 @@ export {
   defaultCalendarControlStrings,
   defaultCalendarMonthStrings,
   defaultSelectWeekStrings,
+  detectContentType,
   every,
   filter,
   get,
+  getContentType,
   groupBy,
   isEmpty,
   map,