@athenaintel/react 0.6.3 → 0.6.5

package/dist/index.d.ts

@@ -72,6 +72,8 @@ export declare interface AthenaChatProps {
     toolUIs?: Record<string, ToolCallMessagePartComponent>;
     /** Mention tools available in the composer. */
     mentionTools?: MentionTool[];
+    /** Suggestion cards shown on the welcome screen. Pass `[]` to hide. */
+    welcomeSuggestions?: WelcomeSuggestion[];
 }
 
 export declare interface AthenaConfig {
@@ -750,4 +752,10 @@ export declare type ViewMode = 'tabs' | 'tiled';
 
 export declare const WebSearchToolUI: ToolCallMessagePartComponent;
 
+export declare interface WelcomeSuggestion {
+    icon: React.ElementType;
+    title: string;
+    prompt: string;
+}
+
 export { }

package/dist/index.js

@@ -16389,13 +16389,6 @@ const ThreadListItemPrimitiveRoot = forwardRef((props, ref) => {
   return jsx(Primitive$1.div, { ...isMain ? { "data-active": "true", "aria-current": "true" } : null, ...props, ref });
 });
 ThreadListItemPrimitiveRoot.displayName = "ThreadListItemPrimitive.Root";
-const useThreadListItemArchive = () => {
-  const aui = useAui();
-  return useCallback(() => {
-    aui.threadListItem().archive();
-  }, [aui]);
-};
-const ThreadListItemPrimitiveArchive = createActionButton("ThreadListItemPrimitive.Archive", useThreadListItemArchive);
 const useThreadListItemTrigger = () => {
   const aui = useAui();
   return useCallback(() => {
@@ -51879,7 +51872,7 @@ const HTML_REPLACEMENTS = {
 function replaceUnsafeChar(ch) {
   return HTML_REPLACEMENTS[ch];
 }
-function escapeHtml(str) {
+function escapeHtml$1(str) {
   if (HTML_ESCAPE_TEST_RE.test(str)) {
     return str.replace(HTML_ESCAPE_REPLACE_RE, replaceUnsafeChar);
   }
@@ -51976,7 +51969,7 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   __proto__: null,
   arrayReplaceAt,
   assign: assign$1,
-  escapeHtml,
+  escapeHtml: escapeHtml$1,
   escapeRE: escapeRE$1,
   fromCodePoint,
   has,
@@ -52157,11 +52150,11 @@ const helpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
 const default_rules = {};
 default_rules.code_inline = function(tokens, idx, options, env, slf) {
   const token = tokens[idx];
-  return "<code" + slf.renderAttrs(token) + ">" + escapeHtml(token.content) + "</code>";
+  return "<code" + slf.renderAttrs(token) + ">" + escapeHtml$1(token.content) + "</code>";
 };
 default_rules.code_block = function(tokens, idx, options, env, slf) {
   const token = tokens[idx];
-  return "<pre" + slf.renderAttrs(token) + "><code>" + escapeHtml(tokens[idx].content) + "</code></pre>\n";
+  return "<pre" + slf.renderAttrs(token) + "><code>" + escapeHtml$1(tokens[idx].content) + "</code></pre>\n";
 };
 default_rules.fence = function(tokens, idx, options, env, slf) {
   const token = tokens[idx];
@@ -52175,9 +52168,9 @@ default_rules.fence = function(tokens, idx, options, env, slf) {
   }
   let highlighted;
   if (options.highlight) {
-    highlighted = options.highlight(token.content, langName, langAttrs) || escapeHtml(token.content);
+    highlighted = options.highlight(token.content, langName, langAttrs) || escapeHtml$1(token.content);
   } else {
-    highlighted = escapeHtml(token.content);
+    highlighted = escapeHtml$1(token.content);
   }
   if (highlighted.indexOf("<pre") === 0) {
     return highlighted + "\n";
@@ -52212,7 +52205,7 @@ default_rules.softbreak = function(tokens, idx, options) {
   return options.breaks ? options.xhtmlOut ? "<br />\n" : "<br>\n" : "\n";
 };
 default_rules.text = function(tokens, idx) {
-  return escapeHtml(tokens[idx].content);
+  return escapeHtml$1(tokens[idx].content);
 };
 default_rules.html_block = function(tokens, idx) {
   return tokens[idx].content;
@@ -52230,7 +52223,7 @@ Renderer.prototype.renderAttrs = function renderAttrs(token) {
   }
   result = "";
   for (i = 0, l = token.attrs.length; i < l; i++) {
-    result += " " + escapeHtml(token.attrs[i][0]) + '="' + escapeHtml(token.attrs[i][1]) + '"';
+    result += " " + escapeHtml$1(token.attrs[i][0]) + '="' + escapeHtml$1(token.attrs[i][1]) + '"';
   }
   return result;
 };
@@ -60597,11 +60590,10 @@ const createLucideIcon = (iconName, iconNode) => {
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$J = [
-  ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
-  ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
-  ["path", { d: "M10 12h4", key: "a56b0p" }]
+  ["path", { d: "M12 5v14", key: "s699le" }],
+  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$J);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$J);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -60609,10 +60601,10 @@ const Archive = createLucideIcon("archive", __iconNode$J);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$I = [
-  ["path", { d: "M12 5v14", key: "s699le" }],
-  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$I);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$I);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -61306,6 +61298,7 @@ const TOOL_META = {
   execute_presentation_code: { displayName: "Generating slides", icon: Monitor },
   // Code & Data
   run_python_code: { displayName: "Running analysis", icon: Code },
+  // Debug: temporarily log all tool names hitting the fallback
   run_sql_query_tool: { displayName: "Querying data", icon: Database },
   create_database: { displayName: "Setting up database", icon: Database },
   run_database_sql: { displayName: "Querying database", icon: Database },
@@ -62363,14 +62356,21 @@ const EmailSearchToolUIImpl = ({
       toolName,
       badge: isComplete && emails.length > 0 ? `${emails.length} emails` : void 0,
       error: errorMsg,
-      children: isComplete && emails.length > 0 && /* @__PURE__ */ jsx(ExpandableSection, { label: "Show email results", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border/30", children: emails.map((email, i) => /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5 py-2", i === 0 && "pt-0"), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-foreground", children: email.subject || "No subject" }),
-          email.date && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: email.date })
-        ] }),
-        email.from && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: email.from }),
-        email.snippet && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-relaxed text-muted-foreground/80", children: truncate(email.snippet, 150) })
-      ] }, i)) }) })
+      children: isComplete && emails.length > 0 && /* @__PURE__ */ jsx(ExpandableSection, { label: "Show email results", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border/30", children: emails.map((email, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex flex-col gap-0.5 py-2", i === 0 && "pt-0"),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-foreground", children: email.subject || "No subject" }),
+              email.date && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: email.date })
+            ] }),
+            email.from && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: email.from }),
+            email.snippet && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-relaxed text-muted-foreground/80", children: truncate(email.snippet, 150) })
+          ]
+        },
+        i
+      )) }) })
     }
   );
 };
@@ -62538,7 +62538,17 @@ const CreateNotebookToolUI = memo(
 CreateNotebookToolUI.displayName = "CreateNotebookToolUI";
 function parsePythonResult(result) {
   const data = normalizeResult(result);
-  if (!data) return { stdout: null, stderr: null, value: null, error: null, exception: null, imagePng: null, createdAssets: [] };
+  if (!data)
+    return {
+      stdout: null,
+      stderr: null,
+      value: null,
+      error: null,
+      exception: null,
+      imagePng: null,
+      plotlyJson: null,
+      createdAssets: []
+    };
   const inner = typeof data.result === "object" && data.result !== null ? data.result : data;
   const stdout = inner.stdout ?? null;
   const stderr = inner.stderr ?? null;
@@ -62554,25 +62564,243 @@ function parsePythonResult(result) {
     };
   }
   let imagePng = null;
+  let plotlyJson = null;
   if (inner.data && typeof inner.data === "object") {
     imagePng = inner.data.png ?? null;
   }
-  if (!imagePng && Array.isArray(data.outputs)) {
+  if (Array.isArray(data.outputs)) {
     for (const output of data.outputs) {
       if (output && typeof output === "object") {
         const mimeBundle = output.mime_bundle;
         if (mimeBundle && typeof mimeBundle === "object") {
-          const png = mimeBundle["image/png"];
-          if (typeof png === "string") {
-            imagePng = png;
-            break;
+          const mb = mimeBundle;
+          if (!plotlyJson && typeof mb["plotly+json"] === "string") {
+            plotlyJson = mb["plotly+json"];
+          }
+          if (!imagePng && typeof mb["image/png"] === "string") {
+            imagePng = mb["image/png"];
           }
         }
       }
     }
   }
   const createdAssets = Array.isArray(data.created_assets) ? data.created_assets : [];
-  return { stdout, stderr, value, error: error2, exception, imagePng, createdAssets };
+  return { stdout, stderr, value, error: error2, exception, imagePng, plotlyJson, createdAssets };
+}
+let plotlyLoadPromise = null;
+function ensurePlotlyLoaded() {
+  if (window.Plotly) return Promise.resolve();
+  if (plotlyLoadPromise) return plotlyLoadPromise;
+  plotlyLoadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://cdn.plot.ly/plotly-2.35.2.min.js";
+    script.onload = () => resolve();
+    script.onerror = () => {
+      plotlyLoadPromise = null;
+      reject(new Error("Failed to load Plotly"));
+    };
+    document.head.appendChild(script);
+  });
+  return plotlyLoadPromise;
+}
+const PlotlyChart = ({ json }) => {
+  const chartRef = useRef(null);
+  const [error2, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    ensurePlotlyLoaded().then(() => {
+      if (cancelled || !chartRef.current) return;
+      const parsed = JSON.parse(json);
+      const Plotly = window.Plotly;
+      Plotly.newPlot(
+        chartRef.current,
+        parsed.data || [],
+        { ...parsed.layout || {}, autosize: true, width: void 0, height: void 0 },
+        { responsive: true, displayModeBar: true, displaylogo: false, showLink: false }
+      );
+    }).catch((err) => {
+      if (!cancelled) setError(err.message);
+    });
+    return () => {
+      cancelled = true;
+      if (chartRef.current) {
+        const Plotly = window.Plotly;
+        if (Plotly == null ? void 0 : Plotly.purge) Plotly.purge(chartRef.current);
+      }
+    };
+  }, [json]);
+  if (error2) {
+    return /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error2 });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: chartRef, className: "w-full overflow-hidden", style: { height: 500 } });
+};
+const SyntaxHighlightedCode = memo(({ code: code2 }) => {
+  const highlighted = useMemo(() => highlightPython(code2), [code2]);
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: "whitespace-pre-wrap break-words text-[11px] leading-relaxed font-mono",
+      dangerouslySetInnerHTML: { __html: highlighted }
+    }
+  );
+});
+SyntaxHighlightedCode.displayName = "SyntaxHighlightedCode";
+const PY_KEYWORDS = /* @__PURE__ */ new Set([
+  "False",
+  "None",
+  "True",
+  "and",
+  "as",
+  "assert",
+  "async",
+  "await",
+  "break",
+  "class",
+  "continue",
+  "def",
+  "del",
+  "elif",
+  "else",
+  "except",
+  "finally",
+  "for",
+  "from",
+  "global",
+  "if",
+  "import",
+  "in",
+  "is",
+  "lambda",
+  "nonlocal",
+  "not",
+  "or",
+  "pass",
+  "raise",
+  "return",
+  "try",
+  "while",
+  "with",
+  "yield"
+]);
+const PY_BUILTINS = /* @__PURE__ */ new Set([
+  "print",
+  "len",
+  "range",
+  "int",
+  "str",
+  "float",
+  "list",
+  "dict",
+  "set",
+  "tuple",
+  "bool",
+  "type",
+  "isinstance",
+  "enumerate",
+  "zip",
+  "map",
+  "filter",
+  "sorted",
+  "reversed",
+  "sum",
+  "min",
+  "max",
+  "abs",
+  "round",
+  "open",
+  "super",
+  "property",
+  "staticmethod",
+  "classmethod",
+  "display",
+  "input",
+  "format",
+  "getattr",
+  "setattr",
+  "hasattr",
+  "vars",
+  "dir"
+]);
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function highlightPython(code2) {
+  const lines = code2.split("\n");
+  return lines.map((line) => {
+    const commentMatch = line.match(/^(\s*)(#.*)$/);
+    if (commentMatch) {
+      return `${escapeHtml(commentMatch[1])}<span style="color:var(--aui-syn-comment, #6a9955)">${escapeHtml(commentMatch[2])}</span>`;
+    }
+    let result = "";
+    let i = 0;
+    while (i < line.length) {
+      if (line[i] === "#") {
+        result += `<span style="color:var(--aui-syn-comment, #6a9955)">${escapeHtml(line.slice(i))}</span>`;
+        break;
+      }
+      if (line.slice(i, i + 3) === '"""' || line.slice(i, i + 3) === "'''") {
+        const quote = line.slice(i, i + 3);
+        const end = line.indexOf(quote, i + 3);
+        const str = end >= 0 ? line.slice(i, end + 3) : line.slice(i);
+        result += `<span style="color:var(--aui-syn-string, #ce9178)">${escapeHtml(str)}</span>`;
+        i += str.length;
+        continue;
+      }
+      if (line[i] === '"' || line[i] === "'") {
+        const q = line[i];
+        let j = i + 1;
+        while (j < line.length && line[j] !== q) {
+          if (line[j] === "\\") j++;
+          j++;
+        }
+        const str = line.slice(i, j + 1);
+        result += `<span style="color:var(--aui-syn-string, #ce9178)">${escapeHtml(str)}</span>`;
+        i = j + 1;
+        continue;
+      }
+      if (/\d/.test(line[i]) && (i === 0 || /[\s(,=[\-+*/:!<>]/.test(line[i - 1]))) {
+        const numMatch = line.slice(i).match(/^(\d+\.?\d*(?:[eE][+-]?\d+)?)/);
+        if (numMatch) {
+          result += `<span style="color:var(--aui-syn-number, #b5cea8)">${escapeHtml(numMatch[1])}</span>`;
+          i += numMatch[1].length;
+          continue;
+        }
+      }
+      if (/[a-zA-Z_]/.test(line[i])) {
+        const wordMatch = line.slice(i).match(/^[a-zA-Z_]\w*/);
+        if (wordMatch) {
+          const word = wordMatch[0];
+          if (PY_KEYWORDS.has(word)) {
+            result += `<span style="color:var(--aui-syn-keyword, #569cd6)">${escapeHtml(word)}</span>`;
+          } else if (PY_BUILTINS.has(word)) {
+            result += `<span style="color:var(--aui-syn-builtin, #dcdcaa)">${escapeHtml(word)}</span>`;
+          } else if (line[i + word.length] === "(") {
+            result += `<span style="color:var(--aui-syn-func, #dcdcaa)">${escapeHtml(word)}</span>`;
+          } else {
+            result += escapeHtml(word);
+          }
+          i += word.length;
+          continue;
+        }
+      }
+      if (line[i] === "@" && (i === 0 || /\s/.test(line[i - 1]))) {
+        const decMatch = line.slice(i).match(/^@[\w.]+/);
+        if (decMatch) {
+          result += `<span style="color:var(--aui-syn-decorator, #569cd6)">${escapeHtml(decMatch[0])}</span>`;
+          i += decMatch[0].length;
+          continue;
+        }
+      }
+      if (/[+\-*/%=<>!&|^~]/.test(line[i])) {
+        result += `<span style="color:var(--aui-syn-op, #d4d4d4)">${escapeHtml(line[i])}</span>`;
+        i++;
+        continue;
+      }
+      result += escapeHtml(line[i]);
+      i++;
+    }
+    return result;
+  }).join("\n");
 }
 const RunPythonCodeToolUIImpl = ({
   toolName,
@@ -62588,11 +62816,15 @@ const RunPythonCodeToolUIImpl = ({
   const isRunning = (status == null ? void 0 : status.type) === "running";
   const isComplete = (status == null ? void 0 : status.type) === "complete";
   const errorMsg = (status == null ? void 0 : status.type) === "incomplete" ? status.error : null;
-  const parsed = useMemo(() => isComplete ? parsePythonResult(result) : null, [result, isComplete]);
+  const parsed = useMemo(
+    () => isComplete ? parsePythonResult(result) : null,
+    [result, isComplete]
+  );
   const openAsset = useAssetPanelStore((s) => s.openAsset);
   const hasOutput = parsed && (parsed.stdout || parsed.stderr || parsed.value);
   const hasError = parsed && (parsed.error || parsed.exception);
   const hasImage = parsed == null ? void 0 : parsed.imagePng;
+  const hasPlotly = parsed == null ? void 0 : parsed.plotlyJson;
   return /* @__PURE__ */ jsxs(
     ToolCard,
     {
@@ -62602,7 +62834,7 @@ const RunPythonCodeToolUIImpl = ({
       toolName,
       error: errorMsg,
       children: [
-        code2 && /* @__PURE__ */ jsx(ExpandableSection, { label: "Show code", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words text-[11px] leading-relaxed font-mono text-foreground/80", children: code2 }) }),
+        code2 && /* @__PURE__ */ jsx(ExpandableSection, { label: "Show code", children: /* @__PURE__ */ jsx(SyntaxHighlightedCode, { code: code2 }) }),
         isComplete && hasOutput && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-4 py-2.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
             /* @__PURE__ */ jsx(Terminal, { className: "size-3 text-muted-foreground" }),
@@ -62617,7 +62849,14 @@ const RunPythonCodeToolUIImpl = ({
           ] }),
           /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-md bg-destructive/5 p-2 text-[11px] leading-relaxed font-mono text-destructive/80", children: ((_a2 = parsed.exception) == null ? void 0 : _a2.traceback) ?? parsed.error })
         ] }),
-        isComplete && hasImage && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-4 py-2.5", children: [
+        isComplete && hasPlotly && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
+            /* @__PURE__ */ jsx(ChartColumn, { className: "size-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Interactive chart" })
+          ] }),
+          /* @__PURE__ */ jsx(PlotlyChart, { json: parsed.plotlyJson })
+        ] }),
+        isComplete && hasImage && !hasPlotly && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-4 py-2.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
             /* @__PURE__ */ jsx(Image, { className: "size-3 text-muted-foreground" }),
             /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Generated image" })
@@ -62848,13 +63087,63 @@ const TooltipIconButton = forwardRef(
 );
 TooltipIconButton.displayName = "TooltipIconButton";
 const EMPTY_MENTION_TOOLS = [];
+const DEFAULT_SUGGESTIONS = [
+  {
+    icon: Search,
+    title: "Research a topic and draft a report",
+    prompt: "Search the web for the latest developments in enterprise AI adoption, then create a document summarizing the key trends, market data, and strategic implications."
+  },
+  {
+    icon: ChartColumn,
+    title: "Analyze data and visualize insights",
+    prompt: "Generate a sample quarterly sales dataset across 4 product categories, then create an interactive chart showing revenue trends and category performance over time."
+  },
+  {
+    icon: Presentation,
+    title: "Build a presentation from scratch",
+    prompt: "Create a 5-slide investor update presentation covering market opportunity, product traction, key metrics, competitive positioning, and next steps."
+  },
+  {
+    icon: FileText,
+    title: "Set up a structured spreadsheet",
+    prompt: "Create a project tracking spreadsheet with columns for task name, owner, priority, status, start date, due date, and completion percentage."
+  }
+];
+const SuggestionCard = ({
+  suggestion,
+  index: index2
+}) => {
+  const aui = useAui();
+  const Icon2 = suggestion.icon;
+  const handleClick2 = useCallback(() => {
+    aui.thread().append({
+      role: "user",
+      content: [{ type: "text", text: suggestion.prompt }]
+    });
+  }, [aui, suggestion.prompt]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick2,
+      className: `fade-in slide-in-from-bottom-2 animate-in fill-mode-both group flex items-start gap-3 rounded-xl border border-border/60 bg-background p-3.5 text-left shadow-sm transition-all duration-150 hover:border-border hover:bg-muted/40 hover:shadow-md`,
+      style: { animationDelay: `${100 + index2 * 75}ms` },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsx(Icon2, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium leading-snug text-foreground", children: suggestion.title }) }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground/0 transition-all group-hover:text-muted-foreground" })
+      ]
+    }
+  );
+};
 const AthenaChat = ({
   className,
   welcomeMessage = "Hello there!",
-  welcomeSubtext = "How can I help you today?",
+  welcomeSubtext = "What can I help you with?",
   maxWidth = "44rem",
   toolUIs,
-  mentionTools
+  mentionTools,
+  welcomeSuggestions = DEFAULT_SUGGESTIONS
 }) => {
   const tools = mentionTools ?? EMPTY_MENTION_TOOLS;
   const mergedToolUIs = useMemo(() => ({
@@ -62867,43 +63156,52 @@ const AthenaChat = ({
     () => () => /* @__PURE__ */ jsx(AssistantMessage, { toolUIs: mergedToolUIs }),
     [mergedToolUIs]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ThreadPrimitiveRoot,
     {
       className: `aui-root aui-thread-root @container flex h-full flex-col bg-background ${className ?? ""}`,
       style: { ["--thread-max-width"]: maxWidth, position: "relative" },
-      children: /* @__PURE__ */ jsxs(
-        ThreadPrimitiveViewport,
-        {
-          turnAnchor: "top",
-          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
-          children: [
-            /* @__PURE__ */ jsx(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
-              /* @__PURE__ */ jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: welcomeMessage }),
-              /* @__PURE__ */ jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: welcomeSubtext })
-            ] }) }) }) }),
-            /* @__PURE__ */ jsx(
-              ThreadPrimitiveMessages,
-              {
-                components: {
-                  UserMessage,
-                  AssistantMessage: AssistantMessageComponent
+      children: [
+        /* @__PURE__ */ jsx(ThreadLoadingOverlay, {}),
+        /* @__PURE__ */ jsxs(
+          ThreadPrimitiveViewport,
+          {
+            turnAnchor: "top",
+            className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
+            children: [
+              /* @__PURE__ */ jsx(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
+                /* @__PURE__ */ jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: welcomeMessage }),
+                welcomeSubtext && /* @__PURE__ */ jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-lg delay-75 duration-200", children: welcomeSubtext }),
+                welcomeSuggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-cols-1 gap-2.5 sm:grid-cols-2", children: welcomeSuggestions.map((s, i) => /* @__PURE__ */ jsx(SuggestionCard, { suggestion: s, index: i }, i)) })
+              ] }) }) }) }),
+              /* @__PURE__ */ jsx(
+                ThreadPrimitiveMessages,
+                {
+                  components: {
+                    UserMessage,
+                    AssistantMessage: AssistantMessageComponent
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsxs(ThreadPrimitiveViewportFooter, { 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 md:pb-6", children: [
-              /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
-              /* @__PURE__ */ jsxs(ComposerPrimitiveRoot, { className: "aui-composer-root relative flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20", children: [
-                /* @__PURE__ */ jsx(TiptapComposer, { tools }),
-                /* @__PURE__ */ jsx(ComposerAction, {})
+              ),
+              /* @__PURE__ */ jsxs(ThreadPrimitiveViewportFooter, { 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 md:pb-6", children: [
+                /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
+                /* @__PURE__ */ jsxs(ComposerPrimitiveRoot, { className: "aui-composer-root relative flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20", children: [
+                  /* @__PURE__ */ jsx(TiptapComposer, { tools }),
+                  /* @__PURE__ */ jsx(ComposerAction, {})
+                ] })
               ] })
-            ] })
-          ]
-        }
-      )
+            ]
+          }
+        )
+      ]
     }
   );
 };
+const ThreadLoadingOverlay = () => {
+  const remoteId = useAthenaThreadId();
+  if (!remoteId) return null;
+  return /* @__PURE__ */ jsx(AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx("div", { className: "size-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" }) }) });
+};
 const ThreadScrollToBottom = () => /* @__PURE__ */ jsx(ThreadPrimitiveScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx(
   TooltipIconButton,
   {
@@ -63340,13 +63638,10 @@ function ThreadList({ className }) {
   ] });
 }
 function ThreadListItem() {
-  return /* @__PURE__ */ jsxs(ThreadListItemPrimitiveRoot, { className: "group", children: [
-    /* @__PURE__ */ jsxs(ThreadListItemPrimitiveTrigger, { className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer text-muted-foreground hover:bg-muted/30 hover:text-foreground data-[active]:bg-muted/50 data-[active]:text-foreground", children: [
-      /* @__PURE__ */ jsx(MessageSquare, { className: "size-3.5 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: /* @__PURE__ */ jsx(ThreadListItemPrimitiveTitle, { fallback: "Untitled" }) })
-    ] }),
-    /* @__PURE__ */ jsx(ThreadListItemPrimitiveArchive, { className: "hidden size-5 items-center justify-center rounded text-muted-foreground/60 transition-colors hover:bg-muted hover:text-foreground group-hover:flex", children: /* @__PURE__ */ jsx(Archive, { className: "size-3" }) })
-  ] });
+  return /* @__PURE__ */ jsx(ThreadListItemPrimitiveRoot, { className: "group", children: /* @__PURE__ */ jsxs(ThreadListItemPrimitiveTrigger, { className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer text-muted-foreground hover:bg-muted/30 hover:text-foreground data-[active]:bg-muted/50 data-[active]:text-foreground", children: [
+    /* @__PURE__ */ jsx(MessageSquare, { className: "size-3.5 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: /* @__PURE__ */ jsx(ThreadListItemPrimitiveTitle, { fallback: "Untitled" }) })
+  ] }) });
 }
 function useAppendToComposer() {
   const aui = useAui();