@tinkrapp/widget 1.2.0 → 1.3.0

package/dist/react.cjs

@@ -11,17 +11,18 @@ var react = require('motion/react');
 var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var ReactMarkdown = require('react-markdown');
-var remarkGfm = require('remark-gfm');
+var ReactMarkdown2 = require('react-markdown');
+var remarkGfm3 = require('remark-gfm');
 var reactSlot = require('@radix-ui/react-slot');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
+var mermaid = require('mermaid');
 var shallow = require('zustand/shallow');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 require('@assistant-ui/react-markdown/styles/dot.css');
 var reactMarkdown = require('@assistant-ui/react-markdown');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,9 +46,10 @@ function _interopNamespace(e) {
 
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
-var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var ReactMarkdown2__default = /*#__PURE__*/_interopDefault(ReactMarkdown2);
+var remarkGfm3__default = /*#__PURE__*/_interopDefault(remarkGfm3);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var mermaid__default = /*#__PURE__*/_interopDefault(mermaid);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -2267,6 +2269,383 @@ var ArtifactToolUIs = () => {
     /* @__PURE__ */ jsxRuntime.jsx(InfographicToolUI, {})
   ] });
 };
+var ToolCard = ({
+  title,
+  subtitle,
+  isStreaming,
+  isError = false,
+  icon,
+  persistentContent,
+  children,
+  footer
+}) => {
+  const [manualExpanded, setManualExpanded] = React2.useState(null);
+  const prevStreamingRef = React2.useRef(isStreaming);
+  const contentRef = React2.useRef(null);
+  const isExpanded = manualExpanded ?? isStreaming;
+  React2.useEffect(() => {
+    if (isStreaming && !prevStreamingRef.current) {
+      setManualExpanded(null);
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+  React2.useEffect(() => {
+    if (isStreaming && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  });
+  const renderIcon = () => {
+    if (icon) return icon;
+    const iconClass = cn("h-4 w-4", isStreaming && "animate-spin");
+    if (isStreaming) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: iconClass });
+    }
+    if (isError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "h-4 w-4 text-red-400" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4" });
+  };
+  const handleToggle = () => {
+    if (!isStreaming) {
+      setManualExpanded((prev2) => prev2 === null ? true : !prev2);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 overflow-hidden rounded-xl border border-border shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 p-2 cursor-pointer transition-colors text-white bg-primary-foreground",
+          !isStreaming && "hover:opacity-90"
+        ),
+        onClick: handleToggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: renderIcon() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium opacity-80 leading-tight text-xs text-muted-foreground", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "truncate font-semibold leading-tight text-sm text-muted-foreground", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "p-1 rounded hover:bg-white/20 transition-colors",
+              "aria-label": isExpanded ? "Collapse" : "Expand",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleToggle();
+              },
+              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ),
+    persistentContent,
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: "p-2 max-h-[400px] overflow-y-auto bg-secondary",
+        children
+      }
+    ),
+    isExpanded && footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2 border-t border-white/10 p-2 bg-primary-foreground/80", children: footer })
+  ] });
+};
+var voiceLabels = {
+  alloy: "Alloy",
+  echo: "Echo",
+  fable: "Fable",
+  onyx: "Onyx",
+  nova: "Nova",
+  shimmer: "Shimmer"
+};
+var AudiobookToolUI = react$1.makeAssistantToolUI({
+  toolName: "createAudiobook",
+  render: function AudiobookUI({ args, result, status }) {
+    const isStreaming = status.type === "running";
+    const isError = status.type === "incomplete";
+    const topic = result?.topic || args.topic || "Generating...";
+    const voice = result?.voice || args.voice || "alloy";
+    const message = result?.message || "Audiobook generation is coming soon! This feature will convert lessons into engaging audio format.";
+    const resultStatus = result?.status || "pending";
+    const persistentContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-white/80 border-b border-white/10 bg-primary-foreground text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Topic:" }),
+      " ",
+      topic,
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground ml-2", children: "Voice:" }),
+        " ",
+        voiceLabels[voice] || voice
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCard,
+      {
+        title: "Audiobook",
+        subtitle: "Audio Learning",
+        isStreaming,
+        isError,
+        icon: !isStreaming && !isError ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HeadphonesIcon, { className: "h-4 w-4" }) : void 0,
+        persistentContent,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          resultStatus === "pending" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-amber-400 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-amber-300", children: "Coming Soon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-200/70 mt-1", children: message })
+            ] })
+          ] }),
+          resultStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-sm text-white/70", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: "Processing audiobook..." }) }),
+          resultStatus === "complete" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-green-400", children: "Audiobook generated successfully!" })
+        ] })
+      }
+    );
+  }
+});
+var OPTION_LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H"];
+var QuestionItem = ({ question, questionNumber, value, onChange, disabled }) => {
+  const options = Array.isArray(question.options) ? question.options : [];
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+        questionNumber,
+        ". ",
+        question.question
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No options available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+      questionNumber,
+      ". ",
+      question.question
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: options.map((option, index) => {
+      const letter = OPTION_LETTERS[index] || String(index + 1);
+      const isSelected = value === option;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => !disabled && onChange(option),
+          disabled,
+          className: cn(
+            "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors",
+            "text-sm",
+            isSelected ? "bg-primary/20 text-foreground" : "bg-muted/50 text-muted-foreground hover:bg-muted",
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "flex items-center justify-center w-5 h-5 rounded text-xs font-medium",
+                  isSelected ? "bg-primary text-primary-foreground" : "bg-muted-foreground/20 text-muted-foreground"
+                ),
+                children: letter
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: option })
+          ]
+        },
+        index
+      );
+    }) })
+  ] });
+};
+var ClarifyingQuestionsInner = ({ args, result, status }) => {
+  const [answers, setAnswers] = React2.useState({});
+  const [additionalDetails, setAdditionalDetails] = React2.useState("");
+  const [isSubmitting, setIsSubmitting] = React2.useState(false);
+  const [isExpanded, setIsExpanded] = React2.useState(true);
+  const [hasSubmitted, setHasSubmitted] = React2.useState(false);
+  const composerRuntime = react$1.useComposerRuntime();
+  const isStreaming = status.type === "running";
+  const isError = status.type === "incomplete";
+  const questions = result?.questions || args?.questions || [];
+  const context = result?.context || args?.context || "";
+  const totalQuestions = questions.length;
+  const answeredCount = questions.filter(
+    (q) => answers[q.id] && answers[q.id].trim() !== ""
+  ).length;
+  const allQuestionsAnswered = answeredCount === totalQuestions && totalQuestions > 0;
+  const handleAnswerChange = (questionId, value) => {
+    setAnswers((prev2) => ({
+      ...prev2,
+      [questionId]: value
+    }));
+  };
+  const handleSubmit = React2.useCallback(
+    async (skipped = false) => {
+      setIsSubmitting(true);
+      setHasSubmitted(true);
+      try {
+        let responseMessage = "";
+        if (skipped) {
+          responseMessage = "I'd like to skip these questions and proceed with the general answer.";
+        } else {
+          const answeredQuestions = questions.filter((q) => answers[q.id] && answers[q.id].trim() !== "").map((q) => `**${q.question}**: ${answers[q.id]}`).join("\n");
+          responseMessage = `Here are my answers to your questions:
+
+${answeredQuestions}`;
+          if (additionalDetails.trim()) {
+            responseMessage += `
+
+Additional details: ${additionalDetails}`;
+          }
+        }
+        composerRuntime.setText(responseMessage);
+        composerRuntime.send();
+      } catch (error) {
+        console.error("[ClarifyingQuestions] Submit error:", error);
+        setIsSubmitting(false);
+        setHasSubmitted(false);
+      }
+    },
+    [questions, answers, additionalDetails, composerRuntime]
+  );
+  const handleSkip = () => {
+    handleSubmit(true);
+  };
+  const handleContinue = () => {
+    handleSubmit(false);
+  };
+  if (hasSubmitted) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 bg-muted/30", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircleIcon, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Questions Answered" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 space-y-2", children: questions.map((q, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
+          index + 1,
+          ". ",
+          q.question
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground font-medium mt-0.5", children: answers[q.id] || "Skipped" })
+      ] }, q.id)) })
+    ] });
+  }
+  if (isStreaming && questions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-2 overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading questions..." })
+    ] }) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-2 overflow-hidden rounded-xl border border-destructive/50 bg-destructive/10 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircleIcon, { className: "h-4 w-4 text-destructive" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-destructive", children: "Failed to load questions" })
+    ] }) });
+  }
+  if (questions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "w-full flex items-center justify-between p-3 hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircleIcon, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Questions" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              answeredCount,
+              " of ",
+              totalQuestions
+            ] }),
+            isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "h-4 w-4 text-muted-foreground" })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && context && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2 text-xs text-muted-foreground italic border-b border-border", children: context }),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3 space-y-4", children: questions.map((question, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        QuestionItem,
+        {
+          question,
+          questionNumber: index + 1,
+          value: answers[question.id] || "",
+          onChange: (value) => handleAnswerChange(question.id, value),
+          disabled: isSubmitting
+        },
+        question.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: additionalDetails,
+          onChange: (e) => setAdditionalDetails(e.target.value),
+          disabled: isSubmitting,
+          placeholder: "Add more optional details",
+          className: cn(
+            "w-full px-3 py-2 rounded-lg text-sm",
+            "bg-muted/30 border border-border",
+            "text-foreground placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary",
+            isSubmitting && "opacity-50 cursor-not-allowed"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 pb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: !allQuestionsAnswered && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Answer all questions to continue" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleSkip,
+              disabled: isSubmitting,
+              className: cn(
+                "px-4 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                "text-muted-foreground hover:text-foreground hover:bg-muted",
+                isSubmitting && "opacity-50 cursor-not-allowed"
+              ),
+              children: "Skip"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleContinue,
+              disabled: isSubmitting || !allQuestionsAnswered,
+              className: cn(
+                "flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                "bg-primary text-primary-foreground",
+                allQuestionsAnswered && !isSubmitting && "hover:bg-primary/90",
+                (!allQuestionsAnswered || isSubmitting) && "opacity-50 cursor-not-allowed"
+              ),
+              children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-3.5 w-3.5 animate-spin" }),
+                "Submitting..."
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                "Continue",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: "\u21B5" })
+              ] })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var ClarifyingQuestionsToolUI = react$1.makeAssistantToolUI({
+  toolName: "askClarifyingQuestions",
+  render: function ClarifyingQuestionsUI({ args, result, status }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClarifyingQuestionsInner, { args, result, status });
+  }
+});
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -2365,118 +2744,35 @@ var TooltipIconButton = React2.forwardRef(({ children, tooltip, side = "bottom",
   ] });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
-var ToolCard = ({
-  title,
-  subtitle,
-  isStreaming,
-  isError = false,
-  icon,
-  persistentContent,
-  children,
-  footer
-}) => {
-  const [manualExpanded, setManualExpanded] = React2.useState(null);
-  const prevStreamingRef = React2.useRef(isStreaming);
-  const contentRef = React2.useRef(null);
-  const isExpanded = manualExpanded ?? isStreaming;
-  React2.useEffect(() => {
-    if (isStreaming && !prevStreamingRef.current) {
-      setManualExpanded(null);
-    }
-    prevStreamingRef.current = isStreaming;
-  }, [isStreaming]);
-  React2.useEffect(() => {
-    if (isStreaming && contentRef.current) {
-      contentRef.current.scrollTop = contentRef.current.scrollHeight;
-    }
-  });
-  const renderIcon = () => {
-    if (icon) return icon;
-    const iconClass = cn("h-4 w-4", isStreaming && "animate-spin");
-    if (isStreaming) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: iconClass });
-    }
-    if (isError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "h-4 w-4 text-red-400" });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4" });
-  };
-  const handleToggle = () => {
-    if (!isStreaming) {
-      setManualExpanded((prev2) => prev2 === null ? true : !prev2);
-    }
+var useCopyToClipboard = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = React2.useState(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 overflow-hidden rounded-xl border border-border shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center gap-2 p-2 cursor-pointer transition-colors text-white bg-primary-foreground",
-          !isStreaming && "hover:opacity-90"
-        ),
-        onClick: handleToggle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: renderIcon() }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium opacity-80 leading-tight text-xs text-muted-foreground", children: subtitle }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "truncate font-semibold leading-tight text-sm text-muted-foreground", children: title })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "p-1 rounded hover:bg-white/20 transition-colors",
-              "aria-label": isExpanded ? "Collapse" : "Expand",
-              onClick: (e) => {
-                e.stopPropagation();
-                handleToggle();
-              },
-              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "h-4 w-4" })
-            }
-          )
-        ]
-      }
-    ),
-    persistentContent,
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: "p-2 max-h-[400px] overflow-y-auto bg-secondary",
-        children
-      }
-    ),
-    isExpanded && footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2 border-t border-white/10 p-2 bg-primary-foreground/80", children: footer })
-  ] });
-};
-var useCopyToClipboard = ({
-  copiedDuration = 3e3
-} = {}) => {
-  const [isCopied, setIsCopied] = React2.useState(false);
-  const copyToClipboard = (value) => {
-    if (!value) return;
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), copiedDuration);
-    });
-  };
-  return { isCopied, copyToClipboard };
-};
-var MarkdownContent = React2.memo(({ content }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-md max-w-none text-white", children: /* @__PURE__ */ jsxRuntime.jsx(
-    ReactMarkdown__default.default,
-    {
-      remarkPlugins: [remarkGfm__default.default],
-      components: {
-        h1: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-          "h1",
-          {
-            className: cn(
-              "mb-2 font-extrabold tracking-tight last:mb-0 text-white",
-              className
-            ),
-            style: { fontSize: "12px" },
-            ...props
-          }
+  return { isCopied, copyToClipboard };
+};
+var MarkdownContent = React2.memo(({ content }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-md max-w-none text-white", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown2__default.default,
+    {
+      remarkPlugins: [remarkGfm3__default.default],
+      components: {
+        h1: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-2 font-extrabold tracking-tight last:mb-0 text-white",
+              className
+            ),
+            style: { fontSize: "12px" },
+            ...props
+          }
         ),
         h2: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
           "h2",
@@ -2678,183 +2974,625 @@ var DetailedAnswerToolUI = react$1.makeAssistantToolUI({
     );
   }
 });
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      ),
-      ...props
+mermaid__default.default.initialize({
+  startOnLoad: false,
+  theme: "dark",
+  securityLevel: "loose",
+  fontFamily: "inherit"
+});
+var useCopyToClipboard2 = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = React2.useState(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+var MermaidRenderer = React2.memo(
+  ({ content, className }) => {
+    const containerRef = React2.useRef(null);
+    const uniqueId = React2.useId();
+    const [svg, setSvg] = React2.useState("");
+    const [error, setError] = React2.useState(null);
+    React2.useEffect(() => {
+      const renderDiagram = async () => {
+        if (!content || !containerRef.current) return;
+        try {
+          setError(null);
+          const id = `mermaid-${uniqueId.replace(/:/g, "-")}`;
+          const { svg: renderedSvg } = await mermaid__default.default.render(id, content);
+          setSvg(renderedSvg);
+        } catch (err) {
+          console.error("[Mermaid] Render error:", err);
+          setError(
+            err instanceof Error ? err.message : "Failed to render diagram"
+          );
+        }
+      };
+      renderDiagram();
+    }, [content, uniqueId]);
+    if (error) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-300 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium mb-1", children: "Failed to render diagram" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-80", children: error }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 p-2 bg-black/20 rounded text-xs overflow-x-auto", children: content })
+      ] });
     }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+    if (!svg) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-4 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: "Rendering diagram..." }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        "data-slot": "dialog-content",
+        ref: containerRef,
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "mermaid-diagram flex items-center justify-center overflow-x-auto",
           className
         ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
+        dangerouslySetInnerHTML: { __html: svg }
       }
-    )
-  ] });
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function Avatar2({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Root,
-    {
-      "data-slot": "avatar",
-      className: cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
-function AvatarFallback({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Fallback,
-    {
-      "data-slot": "avatar-fallback",
-      className: cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var useFileSrc = (file) => {
-  const [src, setSrc] = React2.useState(void 0);
-  React2.useEffect(() => {
-    if (!file) {
-      setSrc(void 0);
-      return;
-    }
-    const objectUrl = URL.createObjectURL(file);
-    setSrc(objectUrl);
-    return () => {
-      URL.revokeObjectURL(objectUrl);
-    };
-  }, [file]);
-  return src;
-};
-var useAttachmentSrc = () => {
-  const { file, src } = react$1.useAssistantState(
-    shallow.useShallow(({ attachment }) => {
-      if (attachment.type !== "image") return {};
-      if (attachment.file) return { file: attachment.file };
-      const src2 = attachment.content?.filter((c) => c.type === "image")[0]?.image;
-      if (!src2) return {};
-      return { src: src2 };
-    })
-  );
-  return useFileSrc(file) ?? src;
-};
-var AttachmentPreview = ({ src }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src,
-      alt: "Image Preview",
-      className: "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
-    }
-  );
+    );
+  }
+);
+MermaidRenderer.displayName = "MermaidRenderer";
+var diagramTypeLabels = {
+  flowchart: "Flowchart",
+  sequence: "Sequence Diagram",
+  classDiagram: "Class Diagram",
+  stateDiagram: "State Diagram",
+  erDiagram: "ER Diagram",
+  mindmap: "Mind Map"
 };
-var AttachmentPreviewDialog = ({ children }) => {
-  const src = useAttachmentSrc();
-  if (!src) return children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogTrigger,
-      {
-        className: "aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50",
-        asChild: true,
-        children
+var MermaidToolUI = react$1.makeAssistantToolUI({
+  toolName: "generateMermaidDiagram",
+  render: function MermaidDiagramUI({ args, result, status }) {
+    const { isCopied, copyToClipboard } = useCopyToClipboard2();
+    const isStreaming = status.type === "running";
+    const isError = status.type === "incomplete";
+    const title = result?.title || args.title || "Generating diagram...";
+    const content = result?.content || args.content || "";
+    const explanation = result?.explanation || args.explanation || "";
+    const diagramType = result?.diagramType || args.diagramType || "flowchart";
+    const handleCopy = () => {
+      if (content) {
+        copyToClipboard(content);
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { src }) })
-    ] })
+    };
+    const handleOpenFullScreen = () => {
+      const newWindow = window.open("", "_blank");
+      if (newWindow) {
+        newWindow.document.write(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>${title}</title>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1">
+              <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+              <style>
+                body {
+                  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                  max-width: 1200px;
+                  margin: 0 auto;
+                  padding: 2rem;
+                  background: #1a1a1a;
+                  color: #fff;
+                }
+                h1 { border-bottom: 1px solid #333; padding-bottom: 0.5rem; }
+                .mermaid { background: #2d2d2d; padding: 1rem; border-radius: 8px; }
+                .explanation { margin-top: 1rem; color: #aaa; }
+              </style>
+            </head>
+            <body>
+              <h1>${title}</h1>
+              <p class="explanation">${explanation}</p>
+              <div class="mermaid">
+${content}
+              </div>
+              <script>
+                mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+              </script>
+            </body>
+          </html>
+        `);
+        newWindow.document.close();
+      }
+    };
+    const persistentExplanation = explanation ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-white/80 border-b border-white/10 bg-primary-foreground text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        diagramTypeLabels[diagramType] || diagramType,
+        ":"
+      ] }),
+      " ",
+      explanation
+    ] }) : void 0;
+    const footerActions = content ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: isCopied ? "Copied!" : "Copy mermaid code",
+          onClick: handleCopy,
+          className: "flex items-center justify-center rounded-md p-1.5 text-white/70 hover:bg-white/10 transition-colors",
+          children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipIconButton,
+        {
+          tooltip: "Open in new window",
+          onClick: handleOpenFullScreen,
+          className: "flex items-center justify-center rounded-md p-1.5 text-white/70 hover:bg-white/10 transition-colors",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCard,
+      {
+        title,
+        subtitle: diagramTypeLabels[diagramType] || "Diagram",
+        isStreaming,
+        isError,
+        icon: !isStreaming && !isError ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NetworkIcon, { className: "h-4 w-4" }) : void 0,
+        persistentContent: persistentExplanation,
+        footer: footerActions,
+        children: content ? /* @__PURE__ */ jsxRuntime.jsx(MermaidRenderer, { content }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground italic", children: "Generating diagram..." })
+      }
+    );
+  }
+});
+var difficultyConfig = {
+  easy: {
+    label: "Easy",
+    className: "text-green-400 bg-green-500/10 border-green-500/20"
+  },
+  medium: {
+    label: "Medium",
+    className: "text-amber-400 bg-amber-500/10 border-amber-500/20"
+  },
+  hard: {
+    label: "Hard",
+    className: "text-red-400 bg-red-500/10 border-red-500/20"
+  }
+};
+var QuizToolUI2 = react$1.makeAssistantToolUI({
+  toolName: "createQuiz",
+  render: function QuizUI({ args, result, status }) {
+    const isStreaming = status.type === "running";
+    const isError = status.type === "incomplete";
+    const topic = result?.topic || args.topic || "Generating...";
+    const questionCount = result?.questionCount || args.questionCount || 5;
+    const difficulty = result?.difficulty || args.difficulty || "medium";
+    const message = result?.message || "Quiz generation is coming soon! This feature will create interactive quizzes to test your knowledge.";
+    const resultStatus = result?.status || "pending";
+    const difficultyStyle = difficultyConfig[difficulty] || difficultyConfig.medium;
+    const persistentContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-white/80 border-b border-white/10 bg-primary-foreground text-xs flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Topic:" }),
+        " ",
+        topic
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Questions:" }),
+        " ",
+        questionCount
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `px-1.5 py-0.5 rounded text-xs font-medium border ${difficultyStyle.className}`,
+          children: difficultyStyle.label
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCard,
+      {
+        title: "Quiz",
+        subtitle: "Knowledge Test",
+        isStreaming,
+        isError,
+        icon: !isStreaming && !isError ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircleIcon, { className: "h-4 w-4" }) : void 0,
+        persistentContent,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          resultStatus === "pending" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-amber-400 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-amber-300", children: "Coming Soon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-200/70 mt-1", children: message })
+            ] })
+          ] }),
+          resultStatus === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-sm text-white/70", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: "Generating quiz questions..." }) }),
+          resultStatus === "complete" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-green-400", children: "Quiz generated successfully! Ready to test your knowledge." })
+        ] })
+      }
+    );
+  }
+});
+var CATEGORY_LABELS = {
+  attachment: "Attachments",
+  description: "Description",
+  caption: "Video",
+  link: "Links",
+  lesson: "Current Lesson"
+};
+function useContextMention(options = {}) {
+  const { onInsertMention } = options;
+  const widgetContext = React2.useContext(WidgetContext);
+  if (!widgetContext) {
+    throw new Error("useContextMention must be used within a WidgetProvider");
+  }
+  const { client } = widgetContext;
+  const {
+    selectedContext: selectedItems,
+    addContextItem,
+    removeContextItem,
+    clearContext
+  } = useMessageContext();
+  const { lessonContext, hasLessonContext } = useLessonContext();
+  React2.useEffect(() => {
+    if (hasLessonContext && lessonContext) {
+      const lessonItem = {
+        id: lessonContext.lessonId,
+        type: "lesson",
+        title: lessonContext.lessonTitle,
+        lessonTitle: lessonContext.lessonTitle,
+        chapterTitle: lessonContext.chapterTitle
+      };
+      if (!selectedItems.some((item) => item.id === lessonItem.id)) {
+        console.log(
+          "[ContextMention] Auto-adding current lesson context:",
+          lessonItem.title
+        );
+        addContextItem(lessonItem);
+      }
+    }
+  }, [hasLessonContext]);
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const [searchTerm, setSearchTerm] = React2.useState("");
+  const [activeIndex, setActiveIndex] = React2.useState(0);
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [categories, setCategories] = React2.useState([]);
+  const [hasMore, setHasMore] = React2.useState(false);
+  const config = client.getConfig();
+  const baseUrl = config.baseUrl || "http://localhost:3000";
+  const assistantId = config.apiKey;
+  const fetchContextItems = React2.useCallback(
+    async (search = "", limit = 10) => {
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams({
+          limit: limit.toString()
+        });
+        if (search) {
+          params.set("search", search);
+        }
+        const response = await fetch(
+          `${baseUrl}/api/widget/context?${params.toString()}`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Assistant-Id": assistantId
+            }
+          }
+        );
+        if (!response.ok) {
+          console.error(
+            "[ContextMention] Failed to fetch context:",
+            response.status
+          );
+          return;
+        }
+        const data = await response.json();
+        setCategories(data.categories);
+        setHasMore(data.hasMore);
+      } catch (error) {
+        console.error("[ContextMention] Error fetching context:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [baseUrl, assistantId]
+  );
+  const openPopover = React2.useCallback(() => {
+    setIsOpen(true);
+    setSearchTerm("");
+    setActiveIndex(0);
+    fetchContextItems();
+  }, [fetchContextItems]);
+  const closePopover = React2.useCallback(() => {
+    setIsOpen(false);
+    setSearchTerm("");
+    setActiveIndex(0);
+  }, []);
+  const updateSearch = React2.useCallback(
+    (term) => {
+      setSearchTerm(term);
+      setActiveIndex(0);
+      fetchContextItems(term);
+    },
+    [fetchContextItems]
+  );
+  const flattenedItems = React2.useMemo(() => {
+    return categories.flatMap((category) => category.items);
+  }, [categories]);
+  const navigateDown = React2.useCallback(() => {
+    setActiveIndex(
+      (prev2) => prev2 < flattenedItems.length - 1 ? prev2 + 1 : prev2
+    );
+  }, [flattenedItems.length]);
+  const navigateUp = React2.useCallback(() => {
+    setActiveIndex((prev2) => prev2 > 0 ? prev2 - 1 : 0);
+  }, []);
+  const selectActiveItem = React2.useCallback(() => {
+    const item = flattenedItems[activeIndex];
+    if (item) {
+      addContextItem(item);
+      closePopover();
+      onInsertMention?.(item);
+    }
+  }, [
+    flattenedItems,
+    activeIndex,
+    addContextItem,
+    closePopover,
+    onInsertMention
+  ]);
+  const selectItem = React2.useCallback(
+    (item) => {
+      addContextItem(item);
+      closePopover();
+      onInsertMention?.(item);
+    },
+    [addContextItem, closePopover, onInsertMention]
+  );
+  const removeItem = React2.useCallback(
+    (itemId) => {
+      removeContextItem(itemId);
+    },
+    [removeContextItem]
+  );
+  const clearAll = React2.useCallback(() => {
+    clearContext();
+  }, [clearContext]);
+  const handleKeyDown = React2.useCallback(
+    (event) => {
+      if (!isOpen) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          navigateDown();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          navigateUp();
+          break;
+        case "Enter":
+          event.preventDefault();
+          selectActiveItem();
+          break;
+        case "Escape":
+          event.preventDefault();
+          closePopover();
+          break;
+      }
+    },
+    [isOpen, navigateDown, navigateUp, selectActiveItem, closePopover]
+  );
+  const getCategoryLabel = React2.useCallback((type) => {
+    return CATEGORY_LABELS[type] || type;
+  }, []);
+  return {
+    // Selected items
+    selectedItems,
+    selectItem,
+    removeItem,
+    clearAll,
+    // Popover state
+    isOpen,
+    openPopover,
+    closePopover,
+    // Search
+    searchTerm,
+    updateSearch,
+    // Navigation
+    activeIndex,
+    setActiveIndex,
+    navigateUp,
+    navigateDown,
+    selectActiveItem,
+    handleKeyDown,
+    // Data
+    categories,
+    flattenedItems,
+    isLoading,
+    hasMore,
+    // Utilities
+    getCategoryLabel
+  };
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function Avatar2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var useFileSrc = (file) => {
+  const [src, setSrc] = React2.useState(void 0);
+  React2.useEffect(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+var useAttachmentSrc = () => {
+  const { file, src } = react$1.useAssistantState(
+    shallow.useShallow(({ attachment }) => {
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src2 = attachment.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src2) return {};
+      return { src: src2 };
+    })
+  );
+  return useFileSrc(file) ?? src;
+};
+var AttachmentPreview = ({ src }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: "Image Preview",
+      className: "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+    }
+  );
+};
+var AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogTrigger,
+      {
+        className: "aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50",
+        asChild: true,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { src }) })
+    ] })
   ] });
 };
 var AttachmentThumb = () => {
@@ -2958,11 +3696,178 @@ var ComposerAddAttachment = () => {
     }
   ) });
 };
+function Popover({
+  modal = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { modal, ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ...props });
+}
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      align,
+      sideOffset,
+      className: cn(
+        "z-[10000] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: {
+        zIndex: 1e4,
+        borderColor: theme.colors.border,
+        ...props.style
+      },
+      ...props
+    }
+  ) });
+}
+var TYPE_ICONS = {
+  attachment: lucideReact.FileIcon,
+  description: lucideReact.FileTextIcon,
+  caption: lucideReact.VideoIcon,
+  link: lucideReact.LinkIcon
+};
+var ContextMentionPopover = ({
+  isOpen,
+  onOpenChange,
+  categories,
+  isLoading,
+  activeIndex,
+  flattenedItems,
+  onSelectItem,
+  onActiveIndexChange,
+  getCategoryLabel,
+  trigger,
+  searchTerm
+}) => {
+  const activeItemRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (isOpen && activeItemRef.current) {
+      activeItemRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [activeIndex, isOpen]);
+  const getFlattenedIndex = (categoryIndex, itemIndex) => {
+    let index = 0;
+    for (let i = 0; i < categoryIndex; i++) {
+      index += categories[i].items.length;
+    }
+    return index + itemIndex;
+  };
+  const hasNoResults = !isLoading && flattenedItems.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: "w-72 max-h-80 overflow-y-auto p-0",
+        align: "start",
+        side: "top",
+        sideOffset: 8,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: searchTerm ? `Searching for "${searchTerm}"` : "Select context to focus on" }) }),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-5 animate-spin text-muted-foreground" }) }),
+          hasNoResults && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: [
+            "No context items found",
+            searchTerm && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs mt-1", children: "Try a different search term" })
+          ] }),
+          !isLoading && categories.map((category, categoryIndex) => {
+            if (category.items.length === 0) return null;
+            const Icon = TYPE_ICONS[category.type] || lucideReact.FileIcon;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: getCategoryLabel(category.type) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground/60", children: [
+                  "(",
+                  category.items.length,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: category.items.map((item, itemIndex) => {
+                const flatIndex = getFlattenedIndex(
+                  categoryIndex,
+                  itemIndex
+                );
+                const isActive = flatIndex === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    ref: isActive ? activeItemRef : null,
+                    type: "button",
+                    className: cn(
+                      "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+                      "hover:bg-accent/10",
+                      isActive && "bg-accent/20"
+                    ),
+                    onClick: () => onSelectItem(item),
+                    onMouseEnter: () => onActiveIndexChange(flatIndex),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full font-medium text-foreground", children: item.title }),
+                      (item.lessonTitle || item.chapterTitle) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full text-xs text-muted-foreground", children: item.chapterTitle && item.lessonTitle ? `${item.chapterTitle} > ${item.lessonTitle}` : item.lessonTitle || item.chapterTitle })
+                    ]
+                  },
+                  item.id
+                );
+              }) })
+            ] }, category.type);
+          })
+        ] })
+      }
+    )
+  ] });
+};
+var ContextPill = ({
+  label,
+  onRemove,
+  readonly = false,
+  className
+}) => {
+  const showRemoveButton = !readonly && onRemove;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-1 rounded-md border border-muted-foreground py-1 px-1.5 text-xs",
+          "max-w-[200px] cursor-default",
+          className
+        ),
+        children: [
+          showRemoveButton && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onRemove,
+              "aria-label": `Remove ${label}`,
+              className: "shrink-0 hover:text-destructive transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", sideOffset: 4, children: label })
+  ] });
+};
 var MarkdownTextImpl = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactMarkdown.MarkdownTextPrimitive,
     {
-      remarkPlugins: [remarkGfm__default.default],
+      remarkPlugins: [remarkGfm3__default.default],
       className: "aui-md",
       components: defaultComponents
     }
@@ -2970,7 +3875,7 @@ var MarkdownTextImpl = () => {
 };
 var MarkdownText = React2.memo(MarkdownTextImpl);
 var CodeHeader = ({ language, code }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard2();
+  const { isCopied, copyToClipboard } = useCopyToClipboard3();
   const onCopy = () => {
     if (!code || isCopied) return;
     copyToClipboard(code);
@@ -2983,7 +3888,7 @@ var CodeHeader = ({ language, code }) => {
     ] })
   ] });
 };
-var useCopyToClipboard2 = ({
+var useCopyToClipboard3 = ({
   copiedDuration = 3e3
 } = {}) => {
   const [isCopied, setIsCopied] = React2.useState(false);
@@ -3122,256 +4027,55 @@ var defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
   td: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
-      className: cn(
-        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
-        className
-      ),
-      ...props
-    }
-  ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      className: cn(
-        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
-        className
-      ),
-      ...props
-    }
-  ),
-  sup: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-    "sup",
-    {
-      className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className),
-      ...props
-    }
-  ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-    "pre",
-    {
-      className: cn(
-        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
-        className
-      ),
-      ...props
-    }
-  ),
-  code: function Code({ className, ...props }) {
-    const isCodeBlock = reactMarkdown.useIsMarkdownCodeBlock();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "code",
-      {
-        className: cn(
-          !isCodeBlock && "aui-md-inline-code rounded border bg-muted font-semibold",
-          className
-        ),
-        ...props
-      }
-    );
-  },
-  CodeHeader
-});
-var ToolFallback = ({
-  toolName,
-  argsText,
-  result,
-  status
-}) => {
-  const isStreaming = status?.type === "running";
-  const isError = status?.type === "incomplete";
-  const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
-  const cancelledReason = isCancelled && status.error ? typeof status.error === "string" ? status.error : JSON.stringify(status.error) : null;
-  const titlePrefix = isCancelled ? "Cancelled: " : isStreaming ? "Running: " : "";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToolCard,
-    {
-      title: `${titlePrefix}${toolName}`,
-      isStreaming,
-      isError,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-white", children: [
-        cancelledReason && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Cancelled reason:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/60", children: cancelledReason })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isCancelled && "opacity-60"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Arguments:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: argsText })
-        ] }),
-        !isCancelled && result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/10 pt-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Result:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
-        ] })
-      ] })
+      className: cn(
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
+        className
+      ),
+      ...props
     }
-  );
-};
-var ContextPill = ({
-  label,
-  onRemove,
-  readonly = false,
-  className
-}) => {
-  const showRemoveButton = !readonly && onRemove;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "group flex items-center gap-1 rounded-md border border-muted-foreground py-1 px-1.5 text-xs",
-          "max-w-[200px] cursor-default",
-          className
-        ),
-        children: [
-          showRemoveButton && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: onRemove,
-              "aria-label": `Remove ${label}`,
-              className: "shrink-0 hover:text-destructive transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", sideOffset: 4, children: label })
-  ] });
-};
-function Popover({
-  modal = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { modal, ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ...props });
-}
-function PopoverContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    PopoverPrimitive__namespace.Content,
+  ),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
     {
-      align,
-      sideOffset,
       className: cn(
-        "z-[10000] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
         className
       ),
-      style: {
-        zIndex: 1e4,
-        borderColor: theme.colors.border,
-        ...props.style
-      },
       ...props
     }
-  ) });
-}
-var TYPE_ICONS = {
-  attachment: lucideReact.FileIcon,
-  description: lucideReact.FileTextIcon,
-  caption: lucideReact.VideoIcon,
-  link: lucideReact.LinkIcon
-};
-var ContextMentionPopover = ({
-  isOpen,
-  onOpenChange,
-  categories,
-  isLoading,
-  activeIndex,
-  flattenedItems,
-  onSelectItem,
-  onActiveIndexChange,
-  getCategoryLabel,
-  trigger,
-  searchTerm
-}) => {
-  const activeItemRef = React2.useRef(null);
-  React2.useEffect(() => {
-    if (isOpen && activeItemRef.current) {
-      activeItemRef.current.scrollIntoView({
-        block: "nearest",
-        behavior: "smooth"
-      });
+  ),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "sup",
+    {
+      className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className),
+      ...props
     }
-  }, [activeIndex, isOpen]);
-  const getFlattenedIndex = (categoryIndex, itemIndex) => {
-    let index = 0;
-    for (let i = 0; i < categoryIndex; i++) {
-      index += categories[i].items.length;
+  ),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "pre",
+    {
+      className: cn(
+        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
+        className
+      ),
+      ...props
     }
-    return index + itemIndex;
-  };
-  const hasNoResults = !isLoading && flattenedItems.length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, modal: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PopoverContent,
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = reactMarkdown.useIsMarkdownCodeBlock();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
       {
-        className: "w-72 max-h-80 overflow-y-auto p-0",
-        align: "start",
-        side: "top",
-        sideOffset: 8,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground", children: searchTerm ? `Searching for "${searchTerm}"` : "Select context to focus on" }) }),
-          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderIcon, { className: "size-5 animate-spin text-muted-foreground" }) }),
-          hasNoResults && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: [
-            "No context items found",
-            searchTerm && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs mt-1", children: "Try a different search term" })
-          ] }),
-          !isLoading && categories.map((category, categoryIndex) => {
-            if (category.items.length === 0) return null;
-            const Icon = TYPE_ICONS[category.type] || lucideReact.FileIcon;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: getCategoryLabel(category.type) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground/60", children: [
-                  "(",
-                  category.items.length,
-                  ")"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: category.items.map((item, itemIndex) => {
-                const flatIndex = getFlattenedIndex(
-                  categoryIndex,
-                  itemIndex
-                );
-                const isActive = flatIndex === activeIndex;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    ref: isActive ? activeItemRef : null,
-                    type: "button",
-                    className: cn(
-                      "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
-                      "hover:bg-accent/10",
-                      isActive && "bg-accent/20"
-                    ),
-                    onClick: () => onSelectItem(item),
-                    onMouseEnter: () => onActiveIndexChange(flatIndex),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full font-medium text-foreground", children: item.title }),
-                      (item.lessonTitle || item.chapterTitle) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate w-full text-xs text-muted-foreground", children: item.chapterTitle && item.lessonTitle ? `${item.chapterTitle} > ${item.lessonTitle}` : item.lessonTitle || item.chapterTitle })
-                    ]
-                  },
-                  item.id
-                );
-              }) })
-            ] }, category.type);
-          })
-        ] })
+        className: cn(
+          !isCodeBlock && "aui-md-inline-code rounded border bg-muted font-semibold",
+          className
+        ),
+        ...props
       }
-    )
-  ] });
-};
+    );
+  },
+  CodeHeader
+});
 var TYPE_ICON_SVGS = {
   attachment: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
   description: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',
@@ -3731,6 +4435,189 @@ var MentionComposerInput = React2.forwardRef(
   }
 );
 MentionComposerInput.displayName = "MentionComposerInput";
+var typeIcons = {
+  markdown: lucideReact.FileTextIcon,
+  mermaid: lucideReact.NetworkIcon
+};
+var typeColors = {
+  markdown: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
+  mermaid: "bg-blue-500/10 text-blue-500 border-blue-500/20"
+};
+var typeLabels = {
+  markdown: "Detailed Answer",
+  mermaid: "Diagram"
+};
+var ArtifactCard2 = ({ artifact, onOpen }) => {
+  const Icon = typeIcons[artifact.type] || lucideReact.FileTextIcon;
+  const colorClass = typeColors[artifact.type] || typeColors.markdown;
+  const label = typeLabels[artifact.type] || "Artifact";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onOpen(artifact),
+      className: cn(
+        "flex items-center gap-3 w-full rounded-lg border px-3 py-2.5 text-left transition-colors",
+        "hover:bg-muted/50",
+        colorClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-current/10", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium opacity-70", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate text-foreground", children: artifact.title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
+      ]
+    }
+  );
+};
+var ArtifactDialog = ({ artifact, onClose }) => {
+  if (!artifact) return null;
+  const Icon = typeIcons[artifact.type] || lucideReact.FileTextIcon;
+  const colorClass = typeColors[artifact.type] || typeColors.markdown;
+  const label = typeLabels[artifact.type] || "Artifact";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 w-full max-w-2xl max-h-[80vh] mx-4 overflow-hidden rounded-xl border border-border bg-background shadow-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between gap-3 px-4 py-3 border-b border-border",
+            colorClass
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-current/10", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium opacity-70", children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold truncate text-foreground", children: artifact.title })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "p-1.5 rounded-md hover:bg-muted/50 transition-colors text-foreground",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto max-h-[calc(80vh-60px)] p-4", children: artifact.type === "mermaid" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 rounded-lg bg-muted/30 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: artifact.content }) }),
+        artifact.summary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown2__default.default, { remarkPlugins: [remarkGfm3__default.default], children: artifact.summary }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown2__default.default, { remarkPlugins: [remarkGfm3__default.default], children: artifact.content }) }) })
+    ] })
+  ] });
+};
+var MessageArtifacts = () => {
+  const [artifacts, setArtifacts] = React2.useState([]);
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [selectedArtifact, setSelectedArtifact] = React2.useState(
+    null
+  );
+  const widgetContext = React2.useContext(WidgetContext);
+  const threadRuntime = react$1.useThreadRuntime();
+  const messageId = react$1.useMessage((state) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("[MessageArtifacts] Message state:", state);
+    }
+    const id = state.id || state.message?.id;
+    return id;
+  });
+  const threadId = threadRuntime?.getState()?.threadId;
+  const fetchArtifacts = React2.useCallback(async () => {
+    if (!threadId || !messageId || !widgetContext) return;
+    const baseUrl = widgetContext.client.getConfig().baseUrl;
+    setIsLoading(true);
+    try {
+      const response = await fetch(
+        `${baseUrl}/api/widget/threads/${threadId}/artifacts?messageId=${messageId}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setArtifacts(data.artifacts || []);
+      }
+    } catch (error) {
+      console.error("[MessageArtifacts] Failed to fetch artifacts:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [threadId, messageId, widgetContext]);
+  React2.useEffect(() => {
+    fetchArtifacts();
+  }, [fetchArtifacts]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-3 w-3 animate-spin" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading artifacts..." })
+    ] });
+  }
+  if (artifacts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 space-y-2", children: artifacts.map((artifact) => /* @__PURE__ */ jsxRuntime.jsx(
+      ArtifactCard2,
+      {
+        artifact,
+        onOpen: setSelectedArtifact
+      },
+      artifact.id
+    )) }),
+    selectedArtifact && /* @__PURE__ */ jsxRuntime.jsx(
+      ArtifactDialog,
+      {
+        artifact: selectedArtifact,
+        onClose: () => setSelectedArtifact(null)
+      }
+    )
+  ] });
+};
+var ToolFallback = ({
+  toolName,
+  argsText,
+  result,
+  status
+}) => {
+  const isStreaming = status?.type === "running";
+  const isError = status?.type === "incomplete";
+  const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
+  const cancelledReason = isCancelled && status.error ? typeof status.error === "string" ? status.error : JSON.stringify(status.error) : null;
+  const titlePrefix = isCancelled ? "Cancelled: " : isStreaming ? "Running: " : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolCard,
+    {
+      title: `${titlePrefix}${toolName}`,
+      isStreaming,
+      isError,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-white", children: [
+        cancelledReason && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Cancelled reason:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/60", children: cancelledReason })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isCancelled && "opacity-60"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Arguments:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: argsText })
+        ] }),
+        !isCancelled && result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/10 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-white/70 mb-0.5", children: "Result:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-black/20 p-1.5 rounded text-white/80", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+        ] })
+      ] })
+    }
+  );
+};
 var TYPE_ICONS2 = {
   attachment: lucideReact.FileIcon,
   description: lucideReact.FileTextIcon,
@@ -3814,208 +4701,6 @@ var UserMessageContent = () => {
   }, [message.content]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedContent });
 };
-var CATEGORY_LABELS = {
-  attachment: "Attachments",
-  description: "Description",
-  caption: "Video",
-  link: "Links",
-  lesson: "Current Lesson"
-};
-function useContextMention(options = {}) {
-  const { onInsertMention } = options;
-  const widgetContext = React2.useContext(WidgetContext);
-  if (!widgetContext) {
-    throw new Error("useContextMention must be used within a WidgetProvider");
-  }
-  const { client } = widgetContext;
-  const {
-    selectedContext: selectedItems,
-    addContextItem,
-    removeContextItem,
-    clearContext
-  } = useMessageContext();
-  const { lessonContext, hasLessonContext } = useLessonContext();
-  React2.useEffect(() => {
-    if (hasLessonContext && lessonContext) {
-      const lessonItem = {
-        id: lessonContext.lessonId,
-        type: "lesson",
-        title: lessonContext.lessonTitle,
-        lessonTitle: lessonContext.lessonTitle,
-        chapterTitle: lessonContext.chapterTitle
-      };
-      if (!selectedItems.some((item) => item.id === lessonItem.id)) {
-        console.log(
-          "[ContextMention] Auto-adding current lesson context:",
-          lessonItem.title
-        );
-        addContextItem(lessonItem);
-      }
-    }
-  }, [hasLessonContext]);
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const [searchTerm, setSearchTerm] = React2.useState("");
-  const [activeIndex, setActiveIndex] = React2.useState(0);
-  const [isLoading, setIsLoading] = React2.useState(false);
-  const [categories, setCategories] = React2.useState([]);
-  const [hasMore, setHasMore] = React2.useState(false);
-  const config = client.getConfig();
-  const baseUrl = config.baseUrl || "http://localhost:3000";
-  const assistantId = config.apiKey;
-  const fetchContextItems = React2.useCallback(
-    async (search = "", limit = 10) => {
-      setIsLoading(true);
-      try {
-        const params = new URLSearchParams({
-          limit: limit.toString()
-        });
-        if (search) {
-          params.set("search", search);
-        }
-        const response = await fetch(
-          `${baseUrl}/api/widget/context?${params.toString()}`,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Assistant-Id": assistantId
-            }
-          }
-        );
-        if (!response.ok) {
-          console.error(
-            "[ContextMention] Failed to fetch context:",
-            response.status
-          );
-          return;
-        }
-        const data = await response.json();
-        setCategories(data.categories);
-        setHasMore(data.hasMore);
-      } catch (error) {
-        console.error("[ContextMention] Error fetching context:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [baseUrl, assistantId]
-  );
-  const openPopover = React2.useCallback(() => {
-    setIsOpen(true);
-    setSearchTerm("");
-    setActiveIndex(0);
-    fetchContextItems();
-  }, [fetchContextItems]);
-  const closePopover = React2.useCallback(() => {
-    setIsOpen(false);
-    setSearchTerm("");
-    setActiveIndex(0);
-  }, []);
-  const updateSearch = React2.useCallback(
-    (term) => {
-      setSearchTerm(term);
-      setActiveIndex(0);
-      fetchContextItems(term);
-    },
-    [fetchContextItems]
-  );
-  const flattenedItems = React2.useMemo(() => {
-    return categories.flatMap((category) => category.items);
-  }, [categories]);
-  const navigateDown = React2.useCallback(() => {
-    setActiveIndex(
-      (prev2) => prev2 < flattenedItems.length - 1 ? prev2 + 1 : prev2
-    );
-  }, [flattenedItems.length]);
-  const navigateUp = React2.useCallback(() => {
-    setActiveIndex((prev2) => prev2 > 0 ? prev2 - 1 : 0);
-  }, []);
-  const selectActiveItem = React2.useCallback(() => {
-    const item = flattenedItems[activeIndex];
-    if (item) {
-      addContextItem(item);
-      closePopover();
-      onInsertMention?.(item);
-    }
-  }, [
-    flattenedItems,
-    activeIndex,
-    addContextItem,
-    closePopover,
-    onInsertMention
-  ]);
-  const selectItem = React2.useCallback(
-    (item) => {
-      addContextItem(item);
-      closePopover();
-      onInsertMention?.(item);
-    },
-    [addContextItem, closePopover, onInsertMention]
-  );
-  const removeItem = React2.useCallback(
-    (itemId) => {
-      removeContextItem(itemId);
-    },
-    [removeContextItem]
-  );
-  const clearAll = React2.useCallback(() => {
-    clearContext();
-  }, [clearContext]);
-  const handleKeyDown = React2.useCallback(
-    (event) => {
-      if (!isOpen) return;
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          navigateDown();
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          navigateUp();
-          break;
-        case "Enter":
-          event.preventDefault();
-          selectActiveItem();
-          break;
-        case "Escape":
-          event.preventDefault();
-          closePopover();
-          break;
-      }
-    },
-    [isOpen, navigateDown, navigateUp, selectActiveItem, closePopover]
-  );
-  const getCategoryLabel = React2.useCallback((type) => {
-    return CATEGORY_LABELS[type] || type;
-  }, []);
-  return {
-    // Selected items
-    selectedItems,
-    selectItem,
-    removeItem,
-    clearAll,
-    // Popover state
-    isOpen,
-    openPopover,
-    closePopover,
-    // Search
-    searchTerm,
-    updateSearch,
-    // Navigation
-    activeIndex,
-    setActiveIndex,
-    navigateUp,
-    navigateDown,
-    selectActiveItem,
-    handleKeyDown,
-    // Data
-    categories,
-    flattenedItems,
-    isLoading,
-    hasMore,
-    // Utilities
-    getCategoryLabel
-  };
-}
 var Thread = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react$1.ThreadPrimitive.Root,
@@ -4024,29 +4709,23 @@ var Thread = () => {
       style: {
         ["--thread-max-width"]: "44rem"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react$1.ThreadPrimitive.Viewport,
-        {
-          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.AssistantIf, { condition: ({ thread }) => thread.isEmpty, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.ThreadPrimitive.Messages,
-              {
-                components: {
-                  UserMessage,
-                  EditComposer,
-                  AssistantMessage
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(react$1.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ThreadScrollToBottom, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(Composer, {})
-            ] })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.ThreadPrimitive.Viewport, { className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.AssistantIf, { condition: ({ thread }) => thread.isEmpty, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.ThreadPrimitive.Messages,
+          {
+            components: {
+              UserMessage,
+              EditComposer,
+              AssistantMessage
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col overflow-visible rounded-t-3xl bg-background pb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(ThreadScrollToBottom, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Composer, {})
+        ] })
+      ] })
     }
   );
 };
@@ -4056,8 +4735,8 @@ var ThreadScrollToBottom = () => {
     {
       tooltip: "Scroll to bottom",
       variant: "outline",
-      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent",
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
+      className: "aui-thread-scroll-to-bottom absolute -top-10 right-2 z-10 rounded-full p-2 disabled:invisible dark:bg-background dark:hover:bg-accent",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, { className: "h-4 w-4" })
     }
   ) });
 };
@@ -4354,7 +5033,8 @@ var AssistantMessage = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(MessageError, {})
+          /* @__PURE__ */ jsxRuntime.jsx(MessageError, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(MessageArtifacts, {})
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: [
           /* @__PURE__ */ jsxRuntime.jsx(BranchPicker, {}),
@@ -4601,6 +5281,10 @@ var ChatWidget = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 h-full w-full overflow-hidden bg-background", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ArtifactToolUIs, {}),
     /* @__PURE__ */ jsxRuntime.jsx(DetailedAnswerToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(MermaidToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ClarifyingQuestionsToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(AudiobookToolUI, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(QuizToolUI2, {}),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: sidebarOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(