@athenaintel/react 0.9.18 → 0.9.19

package/dist/index.d.ts

@@ -48,8 +48,10 @@ export declare interface AssetPanelState {
     autoOpenedAssets: Map<string, number>;
     registerAssetPanelHost: () => void;
     unregisterAssetPanelHost: () => void;
-    openAsset: (assetId: string, meta?: AssetTabMeta) => void;
-    updateTabMeta: (assetId: string, meta: AssetTabMeta) => void;
+    openAsset: (assetId: string, meta?: {
+        name?: string;
+        type?: AssetType;
+    }) => void;
     closeTab: (assetId: string) => void;
     setActiveTab: (assetId: string) => void;
     setViewMode: (mode: ViewMode) => void;
@@ -65,13 +67,6 @@ export declare interface AssetTab {
     id: string;
     name: string | null;
     type: AssetType;
-    embedSearchParams: Record<string, string> | null;
-}
-
-declare interface AssetTabMeta {
-    name?: string | null;
-    type?: AssetType;
-    embedSearchParams?: Record<string, string> | null;
 }
 
 export declare type AssetType = 'presentation' | 'spreadsheet' | 'document' | 'notebook' | 'unknown';
@@ -151,8 +146,6 @@ export declare interface AthenaCitationLinkMetadata {
     assetId: string;
     assetIds: string[];
     assetType: AssetType | null;
-    assetName: string | null;
-    embedSearchParams: Record<string, string>;
 }
 
 /**
@@ -593,8 +586,6 @@ export declare interface ParsedAthenaCitationLink {
     assetId: string;
     assetIds: string[];
     assetType: AssetType | null;
-    assetName: string | null;
-    embedSearchParams: Record<string, string>;
 }
 
 declare interface QuoteContextValue {
@@ -1027,15 +1018,12 @@ export declare function useAssetEmbed(assetId: string | null, options?: UseAsset
 export declare interface UseAssetEmbedOptions {
     readOnly?: boolean;
     expiresInSeconds?: number;
-    embedSearchParams?: Record<string, string> | null;
 }
 
 export declare interface UseAssetEmbedResult {
     embedUrl: string | null;
     isLoading: boolean;
     error: string | null;
-    assetTitle: string | null;
-    assetType: AssetType | null;
 }
 
 export declare const useAssetPanelStore: UseBoundStore<Omit<StoreApi<AssetPanelState>, "setState" | "persist"> & {

package/dist/index.js

@@ -24299,6 +24299,22 @@ const useAthenaRuntime = (config2) => {
   tokenRef.current = token;
   const apiKeyRef = useRef(apiKey);
   apiKeyRef.current = apiKey;
+  const runConfigRef = useRef({
+    enabledTools,
+    agent: agent2,
+    model,
+    workbench,
+    knowledgeBase,
+    systemPrompt
+  });
+  runConfigRef.current = {
+    enabledTools,
+    agent: agent2,
+    model,
+    workbench,
+    knowledgeBase,
+    systemPrompt
+  };
   const isExistingThread = !!threadIdProp;
   const runtime = useAssistantTransportRuntime({
     initialState: { messages: [] },
@@ -24397,16 +24413,17 @@ const useAthenaRuntime = (config2) => {
         return true;
       },
       get runConfig() {
+        const currentRunConfig = runConfigRef.current;
         return {
           custom: {
-            enabled_tools: enabledTools,
-            agent: agent2,
-            model,
+            enabled_tools: currentRunConfig.enabledTools,
+            agent: currentRunConfig.agent,
+            model: currentRunConfig.model,
             effort_dial_duration: -1,
             plan_mode_enabled: false,
-            workbench,
-            knowledge_base: knowledgeBase,
-            ...systemPrompt ? { system_prompt: systemPrompt } : {}
+            workbench: currentRunConfig.workbench,
+            knowledge_base: currentRunConfig.knowledgeBase,
+            ...currentRunConfig.systemPrompt ? { system_prompt: currentRunConfig.systemPrompt } : {}
           },
           persistToolInvocationLogs: true
         };
@@ -58878,39 +58895,17 @@ const useAssetPanelStore = create()(
         const existing = s.tabs.find((t) => t.id === assetId);
         if (existing) {
           const tabs = meta ? s.tabs.map(
-            (t) => t.id === assetId ? {
-              ...t,
-              name: meta.name ?? t.name,
-              type: meta.type ?? t.type,
-              embedSearchParams: meta.embedSearchParams ?? t.embedSearchParams
-            } : t
+            (t) => t.id === assetId ? { ...t, name: meta.name ?? t.name, type: meta.type ?? t.type } : t
           ) : s.tabs;
           return { isOpen: true, tabs, activeTabId: assetId };
         }
         const newTab = {
           id: assetId,
           name: (meta == null ? void 0 : meta.name) ?? null,
-          type: (meta == null ? void 0 : meta.type) ?? "unknown",
-          embedSearchParams: (meta == null ? void 0 : meta.embedSearchParams) ?? null
+          type: (meta == null ? void 0 : meta.type) ?? "unknown"
         };
         return { isOpen: true, tabs: [...s.tabs, newTab], activeTabId: assetId };
       }),
-      updateTabMeta: (assetId, meta) => set2((s) => {
-        const existing = s.tabs.find((t) => t.id === assetId);
-        if (!existing) {
-          return {};
-        }
-        return {
-          tabs: s.tabs.map(
-            (t) => t.id === assetId ? {
-              ...t,
-              name: meta.name ?? t.name,
-              type: meta.type ?? t.type,
-              embedSearchParams: meta.embedSearchParams ?? t.embedSearchParams
-            } : t
-          )
-        };
-      }),
       closeTab: (assetId) => set2((s) => {
         var _a2;
         const tabs = s.tabs.filter((t) => t.id !== assetId);
@@ -58968,43 +58963,13 @@ const ASSET_TYPE_ALIASES = {
   super_document: "document"
 };
 const isAthenaSpacesPath = (url) => url.pathname.replace(/\/+$/, "") === "/dashboard/spaces";
-const normalizeAssetType$1 = (value) => {
+const normalizeAssetType = (value) => {
   if (!value) {
     return null;
   }
   const normalizedValue = value.trim().replace(/^athena\//, "").toLowerCase().replace(/-/g, "_");
   return ASSET_TYPE_ALIASES[normalizedValue] ?? null;
 };
-const isLikelyAssetId = (value) => !!value && /^(asset|thread|project|collection)_[a-z0-9-]+$/i.test(value.trim());
-const sanitizeDisplayName = (value) => {
-  if (!value) {
-    return null;
-  }
-  const trimmedValue = value.trim();
-  if (!trimmedValue) {
-    return null;
-  }
-  if (trimmedValue.startsWith('"') && trimmedValue.endsWith('"') || trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
-    return trimmedValue.slice(1, -1).trim() || null;
-  }
-  return trimmedValue;
-};
-const getCitationDisplayName = ({
-  assetName,
-  linkText
-}) => {
-  const sanitizedAssetName = sanitizeDisplayName(assetName);
-  const sanitizedLinkText = sanitizeDisplayName(linkText);
-  const genericLinkTextPattern = /^(this|that|the)\s+asset$/i;
-  if (sanitizedAssetName && !isLikelyAssetId(sanitizedAssetName)) {
-    return sanitizedAssetName;
-  }
-  if (sanitizedLinkText && !genericLinkTextPattern.test(sanitizedLinkText)) {
-    return sanitizedLinkText;
-  }
-  return sanitizedAssetName ?? sanitizedLinkText;
-};
-const getEmbedSearchParams = (url) => Object.fromEntries(url.searchParams.entries());
 const getOrigin = (value) => {
   if (!value) {
     return null;
@@ -59086,11 +59051,7 @@ const parseAthenaCitationLink = ({
     url,
     assetId,
     assetIds,
-    assetType: normalizeAssetType$1(
-      url.searchParams.get("asset_type") ?? url.searchParams.get("assetType") ?? url.searchParams.get("type")
-    ),
-    assetName: sanitizeDisplayName(url.searchParams.get("name")),
-    embedSearchParams: getEmbedSearchParams(url)
+    assetType: normalizeAssetType(url.searchParams.get("asset_type") ?? url.searchParams.get("type"))
   };
 };
 const isAthenaCitationUrl = ({
@@ -59138,19 +59099,12 @@ const useAthenaLinkClickHandler = () => {
       const citationMetadata = citationLink ? {
         assetId: citationLink.assetId,
         assetIds: citationLink.assetIds,
-        assetType: citationLink.assetType,
-        assetName: citationLink.assetName,
-        embedSearchParams: citationLink.embedSearchParams
+        assetType: citationLink.assetType
       } : null;
       const openInAssetPanel = citationLink ? () => {
-        const displayName = getCitationDisplayName({
-          assetName: citationLink.assetName,
-          linkText: trimmedLinkText
-        });
         openAsset(citationLink.assetId, {
-          name: displayName ?? void 0,
-          type: citationLink.assetType ?? void 0,
-          embedSearchParams: citationLink.embedSearchParams
+          name: trimmedLinkText ?? void 0,
+          type: citationLink.assetType ?? void 0
         });
       } : void 0;
       const context2 = {
@@ -63590,12 +63544,6 @@ function extractAssetId(result) {
   if (typeof id === "string" && id.startsWith("asset_")) return id;
   return null;
 }
-function extractAssetTitle(result) {
-  const data = normalizeResult(result);
-  if (!data) return null;
-  const title = data.assetTitle ?? data.asset_title ?? data.title ?? data.name;
-  return typeof title === "string" && title.trim().length > 0 ? title.trim() : null;
-}
 function resetAssetAutoOpen() {
   useAssetPanelStore.getState().resetAutoOpen();
 }
@@ -64315,7 +64263,6 @@ const OpenAssetToolUIImpl = ({
   const typedArgs = args;
   const argsAssetId = (typedArgs == null ? void 0 : typedArgs.asset_id) ?? (typedArgs == null ? void 0 : typedArgs.assetId) ?? "";
   const resultAssetId = extractAssetId(result);
-  const resultAssetTitle = extractAssetTitle(result);
   const assetId = resultAssetId ?? (argsAssetId.startsWith("asset_") ? argsAssetId : null);
   const isRunning = (status == null ? void 0 : status.type) === "running";
   const isComplete = (status == null ? void 0 : status.type) === "complete" || !status;
@@ -64327,10 +64274,10 @@ const OpenAssetToolUIImpl = ({
     if (isComplete && !isCancelled && assetId && !wasCompleteAtMount.current) {
       const store = useAssetPanelStore.getState();
       if (store.markAutoOpened(assetId)) {
-        store.openAsset(assetId, { name: resultAssetTitle ?? void 0 });
+        store.openAsset(assetId);
       }
     }
-  }, [isComplete, isCancelled, assetId, resultAssetTitle]);
+  }, [isComplete, isCancelled, assetId]);
   return /* @__PURE__ */ jsx(
     ToolCard,
     {
@@ -64346,7 +64293,7 @@ const OpenAssetToolUIImpl = ({
         "button",
         {
           type: "button",
-          onClick: () => openAsset(assetId, { name: resultAssetTitle ?? void 0 }),
+          onClick: () => openAsset(assetId),
           className: "flex items-center gap-1.5 rounded-md border border-border/60 px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
           children: [
             /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" }),
@@ -64957,7 +64904,9 @@ const AthenaChat = ({
           {
             turnAnchor: "top",
             className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4",
+            "data-aui-thread-viewport": "",
             children: [
+              /* @__PURE__ */ jsx(ThreadScrollToTop, {}),
               /* @__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 }),
@@ -65003,6 +64952,50 @@ const ThreadLoadingOverlay = () => {
   if (!remoteId || timedOut) 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 THREAD_VIEWPORT_ATTR = "data-aui-thread-viewport";
+const useScrollToTop = () => {
+  const [isAtTop, setIsAtTop] = useState(true);
+  const [buttonEl, setButtonEl] = useState(null);
+  const containerRef = useCallback((node) => {
+    setButtonEl(node);
+  }, []);
+  const getViewport = useCallback(() => {
+    if (!buttonEl) return null;
+    return buttonEl.closest(`[${THREAD_VIEWPORT_ATTR}]`);
+  }, [buttonEl]);
+  useEffect(() => {
+    const viewport = getViewport();
+    if (!viewport) return;
+    const handleScroll2 = () => {
+      setIsAtTop(viewport.scrollTop <= 50);
+    };
+    handleScroll2();
+    viewport.addEventListener("scroll", handleScroll2, { passive: true });
+    return () => viewport.removeEventListener("scroll", handleScroll2);
+  }, [getViewport]);
+  const handleClick2 = useCallback(() => {
+    const viewport = getViewport();
+    if (!viewport) return;
+    viewport.scrollTo({ top: 0, behavior: "smooth" });
+  }, [getViewport]);
+  return { isAtTop, containerRef, handleClick: handleClick2 };
+};
+const ThreadScrollToTop = () => {
+  const { isAtTop, containerRef, handleClick: handleClick2 } = useScrollToTop();
+  const isEmpty3 = useAuiState((s) => s.thread.isEmpty);
+  if (isEmpty3) return null;
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 mx-auto flex h-0 w-full max-w-(--thread-max-width) justify-center", children: /* @__PURE__ */ jsx(
+    TooltipIconButton,
+    {
+      ref: containerRef,
+      tooltip: "Scroll to top",
+      variant: "outline",
+      className: cn("aui-thread-scroll-to-top absolute top-2 rounded-full p-4 dark:bg-background dark:hover:bg-accent", isAtTop && "invisible"),
+      onClick: handleClick2,
+      children: /* @__PURE__ */ jsx(ArrowUp, {})
+    }
+  ) });
+};
 const ThreadScrollToBottom = () => /* @__PURE__ */ jsx(ThreadPrimitiveScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx(
   TooltipIconButton,
   {
@@ -65271,67 +65264,14 @@ const AthenaUserMessage = ({
     children: /* @__PURE__ */ jsx("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ jsx(MessagePrimitiveParts, { components: { Text: TextComponent } }) })
   }
 );
-const EMBED_ASSET_TYPE_ALIASES = {
-  document: "document",
-  image: "document",
-  notebook: "notebook",
-  pdf: "document",
-  powerpoint_deck: "presentation",
-  presentation: "presentation",
-  puck_presentation: "presentation",
-  sheet: "spreadsheet",
-  spreadsheet: "spreadsheet",
-  super_document: "document"
-};
 const embedCache = /* @__PURE__ */ new Map();
-const normalizeAssetType = (value) => {
-  if (!value) {
-    return null;
-  }
-  const normalizedValue = value.trim().replace(/^athena\//, "").toLowerCase().replace(/-/g, "_");
-  return EMBED_ASSET_TYPE_ALIASES[normalizedValue] ?? null;
-};
-const getEmbedSearchParamsCacheKey = (embedSearchParams) => {
-  if (!embedSearchParams || Object.keys(embedSearchParams).length === 0) {
-    return "{}";
-  }
-  const sortedEntries = Object.entries(embedSearchParams).sort(
-    ([left], [right]) => left.localeCompare(right)
-  );
-  return JSON.stringify(Object.fromEntries(sortedEntries));
-};
-const appendEmbedSearchParams = ({
-  embedUrl,
-  embedSearchParams
-}) => {
-  if (!embedSearchParams || Object.keys(embedSearchParams).length === 0) {
-    return embedUrl;
-  }
-  const url = new URL(embedUrl);
-  for (const [key, value] of Object.entries(embedSearchParams)) {
-    if (!value) {
-      continue;
-    }
-    url.searchParams.set(key, value);
-  }
-  return url.toString();
-};
 function useAssetEmbed(assetId, options = {
   backendUrl: ""
 }) {
-  const {
-    readOnly = false,
-    expiresInSeconds = 60 * 60 * 24 * 30,
-    backendUrl,
-    apiKey,
-    token,
-    embedSearchParams
-  } = options;
+  const { readOnly = false, expiresInSeconds = 60 * 60 * 24 * 30, backendUrl, apiKey, token } = options;
   const [embedUrl, setEmbedUrl] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error2, setError] = useState(null);
-  const [assetTitle, setAssetTitle] = useState(null);
-  const [assetType, setAssetType] = useState(null);
   const abortRef = useRef(null);
   useEffect(() => {
     var _a2;
@@ -65339,18 +65279,14 @@ function useAssetEmbed(assetId, options = {
       setEmbedUrl(null);
       setIsLoading(false);
       setError(null);
-      setAssetTitle(null);
-      setAssetType(null);
       return;
     }
-    const cacheKey = `${assetId}:${readOnly}:${token ?? apiKey ?? "anon"}:${getEmbedSearchParamsCacheKey(embedSearchParams)}`;
+    const cacheKey = `${assetId}:${readOnly}:${token ?? apiKey ?? "anon"}`;
     const cached = embedCache.get(cacheKey);
     if (cached && cached.expiresAt > Date.now() / 1e3) {
       setEmbedUrl(cached.url);
       setIsLoading(false);
       setError(null);
-      setAssetTitle(cached.assetTitle);
-      setAssetType(cached.assetType);
       return;
     }
     const apiBaseUrl = backendUrl.replace(/\/api\/assistant-ui\/?$/, "");
@@ -65358,14 +65294,11 @@ function useAssetEmbed(assetId, options = {
     (_a2 = abortRef.current) == null ? void 0 : _a2.abort();
     const controller = new AbortController();
     abortRef.current = controller;
-    setEmbedUrl(null);
     setIsLoading(true);
     setError(null);
-    setAssetTitle(null);
-    setAssetType(null);
     const headers = { "Content-Type": "application/json" };
     if (token) {
-      headers.Authorization = `Bearer ${token}`;
+      headers["Authorization"] = `Bearer ${token}`;
     } else if (apiKey) {
       headers["X-API-KEY"] = apiKey;
     }
@@ -65385,31 +65318,17 @@ function useAssetEmbed(assetId, options = {
       }
       return res.json();
     }).then((data) => {
-      const resolvedAssetType = normalizeAssetType(data.athena_converted_type) ?? normalizeAssetType(data.athena_original_type);
-      const resolvedEmbedUrl = appendEmbedSearchParams({
-        embedUrl: data.embed_url,
-        embedSearchParams
-      });
-      embedCache.set(cacheKey, {
-        url: resolvedEmbedUrl,
-        expiresAt: data.expires_at,
-        assetTitle: data.title ?? null,
-        assetType: resolvedAssetType
-      });
-      setEmbedUrl(resolvedEmbedUrl);
-      setAssetTitle(data.title ?? null);
-      setAssetType(resolvedAssetType);
+      embedCache.set(`${assetId}:${readOnly}:${token ?? apiKey ?? "anon"}`, { url: data.embed_url, expiresAt: data.expires_at });
+      setEmbedUrl(data.embed_url);
       setIsLoading(false);
     }).catch((err) => {
-      if (err.name === "AbortError") {
-        return;
-      }
+      if (err.name === "AbortError") return;
       setError(err.message);
       setIsLoading(false);
     });
     return () => controller.abort();
-  }, [assetId, readOnly, expiresInSeconds, backendUrl, apiKey, token, embedSearchParams]);
-  return { embedUrl, isLoading, error: error2, assetTitle, assetType };
+  }, [assetId, readOnly, expiresInSeconds, backendUrl, apiKey, token]);
+  return { embedUrl, isLoading, error: error2 };
 }
 const ASSET_TYPE_CONFIG = {
   presentation: { icon: Presentation, label: "Presentation" },
@@ -65419,28 +65338,13 @@ const ASSET_TYPE_CONFIG = {
   unknown: { icon: File$1, label: "Asset" }
 };
 const AssetIframe = memo(
-  ({ tabId, tabName, tabType, embedSearchParams }) => {
+  ({ tabId, tabName }) => {
     const { backendUrl, apiKey, token } = useAthenaConfig();
-    const { embedUrl, isLoading, error: error2, assetTitle, assetType } = useAssetEmbed(tabId, {
+    const { embedUrl, isLoading, error: error2 } = useAssetEmbed(tabId, {
       backendUrl,
       apiKey,
-      token,
-      embedSearchParams
+      token
     });
-    useEffect(() => {
-      if (!assetTitle && !assetType) {
-        return;
-      }
-      const nextName = assetTitle ?? tabName;
-      const nextType = assetType ?? tabType;
-      if (nextName === tabName && nextType === tabType) {
-        return;
-      }
-      useAssetPanelStore.getState().updateTabMeta(tabId, {
-        name: nextName ?? void 0,
-        type: nextType
-      });
-    }, [assetTitle, assetType, tabId, tabName, tabType]);
     if (isLoading) {
       return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx(LoaderCircle, { className: "mx-auto size-6 animate-spin text-muted-foreground" }),
@@ -65502,7 +65406,7 @@ const PanelContent = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex-1 overflow-hidden", isTiled && gridClass, isTiled && "gap-px bg-border/60"),
+      className: `flex-1 overflow-hidden ${isTiled ? `${gridClass} gap-px bg-border/60` : ""}`,
       children: tabs.map((tab) => {
         const isActive2 = tab.id === activeTabId;
         const config2 = ASSET_TYPE_CONFIG[tab.type];
@@ -65525,15 +65429,7 @@ const PanelContent = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-                  AssetIframe,
-                  {
-                    tabId: tab.id,
-                    tabName: tab.name,
-                    tabType: tab.type,
-                    embedSearchParams: tab.embedSearchParams
-                  }
-                ) })
+                /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(AssetIframe, { tabId: tab.id, tabName: tab.name }) })
               ]
             },
             tab.id
@@ -65543,15 +65439,7 @@ const PanelContent = ({
           "div",
           {
             className: isActive2 ? "h-full w-full" : "hidden",
-            children: /* @__PURE__ */ jsx(
-              AssetIframe,
-              {
-                tabId: tab.id,
-                tabName: tab.name,
-                tabType: tab.type,
-                embedSearchParams: tab.embedSearchParams
-              }
-            )
+            children: /* @__PURE__ */ jsx(AssetIframe, { tabId: tab.id, tabName: tab.name })
           },
           tab.id
         );
@@ -65569,10 +65457,7 @@ const TabBar = () => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "group flex max-w-[180px] shrink-0 cursor-pointer items-center gap-1.5 border-r border-border/40 px-3 py-1.5 text-xs",
-          isActive2 ? "border-b-2 border-b-primary bg-background text-foreground" : "text-muted-foreground hover:bg-background/50 hover:text-foreground"
-        ),
+        className: `group flex max-w-[180px] shrink-0 cursor-pointer items-center gap-1.5 border-r border-border/40 px-3 py-1.5 text-xs ${isActive2 ? "border-b-2 border-b-primary bg-background text-foreground" : "text-muted-foreground hover:bg-background/50 hover:text-foreground"}`,
         onClick: () => setActiveTab(tab.id),
         children: [
           /* @__PURE__ */ jsx(TypeIcon, { className: "size-3 shrink-0" }),
@@ -65614,10 +65499,7 @@ const PanelHeader = ({ fullscreen }) => {
       "button",
       {
         onClick: () => setViewMode(isTiled ? "tabs" : "tiled"),
-        className: cn(
-          "flex size-7 items-center justify-center rounded-lg transition-colors",
-          isTiled ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground"
-        ),
+        className: `flex size-7 items-center justify-center rounded-lg transition-colors ${isTiled ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground"}`,
         title: isTiled ? "Switch to tabs" : "Tile all assets",
         children: isTiled ? /* @__PURE__ */ jsx(Layers, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LayoutGrid, { className: "size-3.5" })
       }