@nextclaw/ui 0.15.10 → 0.15.12

package/src/features/chat/features/message/components/chat-inline-file-preview.tsx

@@ -5,10 +5,10 @@ import type {
 } from "@nextclaw/agent-chat-ui";
 import { Code2, FileText, PanelRightOpen } from "lucide-react";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
+import { ChatInlineContentSurface } from "@/features/chat/features/message/components/chat-inline-content-surface";
 import { createWorkspaceFileTab } from "@/features/chat/features/workspace/utils/chat-workspace-file-tab.utils";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
 
 type ChatInlineFilePreviewProps = {
   display: ChatInlineDisplayViewModel;
@@ -18,8 +18,6 @@ type ChatInlineFilePreviewProps = {
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
-const INLINE_HTML_MIN_HEIGHT = 240;
-
 export function ChatInlineFilePreview({
   display,
   parentSessionKey,
@@ -63,84 +61,64 @@ export function ChatInlineFilePreview({
     });
   };
 
-  return (
+  return isRenderedHtml ? (
+    <ChatInlineContentSurface
+      actions={
+        <>
+          <IconActionButton
+            size="sm"
+            icon={<PanelRightOpen className="h-3.5 w-3.5" />}
+            label={t("chatPanelCardExpand")}
+            tooltipSide="top"
+            onClick={() => openInWorkspace("rendered")}
+          />
+          <IconActionButton
+            size="sm"
+            icon={<Code2 className="h-3.5 w-3.5" />}
+            label={t("chatWorkspaceOpenSource")}
+            tooltipSide="top"
+            onClick={() => openInWorkspace("source")}
+          />
+        </>
+      }
+      contentHeight={htmlContentHeight}
+    >
+      <ChatSessionWorkspaceFilePreview
+        file={file}
+        sessionProjectRoot={sessionProjectRoot}
+        sessionWorkingDir={sessionWorkingDir}
+        showBreadcrumbs={false}
+        onHtmlContentHeightChange={setHtmlContentHeight}
+        onFileOpen={onFileOpen}
+      />
+    </ChatInlineContentSurface>
+  ) : (
     <section
-      className={cn(
-        "my-2 w-full max-w-[48rem]",
-        isRenderedHtml
-          ? "group/inline-html relative overflow-visible"
-          : "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
-      )}
+      className="my-2 w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
       data-chat-inline-file-preview="true"
       data-chat-message-wide-content="true"
     >
-      {isRenderedHtml ? (
-        <div
-          className={cn(
-            "pointer-events-none absolute bottom-full left-1/2 z-10 -translate-x-1/2 pb-2 opacity-0 transition-opacity duration-150",
-            "group-hover/inline-html:pointer-events-auto group-hover/inline-html:opacity-100 group-focus-within/inline-html:pointer-events-auto group-focus-within/inline-html:opacity-100",
-          )}
-          data-chat-inline-file-actions="true"
-        >
-          <div
-            className="flex items-center gap-0.5 rounded-lg bg-background/95 p-0.5 shadow-md ring-1 ring-border/60 backdrop-blur-sm"
-            data-chat-inline-file-actions-surface="true"
-          >
-            <IconActionButton
-              size="sm"
-              icon={<PanelRightOpen className="h-3.5 w-3.5" />}
-              label={t("chatPanelCardExpand")}
-              tooltipSide="top"
-              onClick={() => openInWorkspace("rendered")}
-            />
-            <IconActionButton
-              size="sm"
-              icon={<Code2 className="h-3.5 w-3.5" />}
-              label={t("chatWorkspaceOpenSource")}
-              tooltipSide="top"
-              onClick={() => openInWorkspace("source")}
-            />
-          </div>
+      <header className="border-b border-border bg-muted/45 px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
+          <FileText
+            className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+            aria-hidden
+          />
+          <span className="truncate">{title}</span>
         </div>
-      ) : (
-        <header className="border-b border-border bg-muted/45 px-3 py-2">
-          <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
-            <FileText
-              className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
-              aria-hidden
-            />
-            <span className="truncate">{title}</span>
-          </div>
-          <p
-            className="mt-1 truncate font-mono text-[11px] font-normal text-muted-foreground"
-            title={file.path}
-          >
-            {file.path}
-          </p>
-        </header>
-      )}
-      <div
-        className={cn(
-          "min-h-[240px] overflow-hidden",
-          isRenderedHtml
-            ? "h-[240px] max-h-[min(80vh,720px)] rounded-lg"
-            : "h-[420px] max-h-[min(60vh,420px)]",
-        )}
-        data-chat-inline-file-viewport="true"
-        style={
-          isRenderedHtml && htmlContentHeight
-            ? { height: Math.max(INLINE_HTML_MIN_HEIGHT, htmlContentHeight) }
-            : undefined
-        }
-      >
+        <p
+          className="mt-1 truncate font-mono text-[11px] font-normal text-muted-foreground"
+          title={file.path}
+        >
+          {file.path}
+        </p>
+      </header>
+      <div className="h-[420px] min-h-[240px] max-h-[min(60vh,420px)] overflow-hidden">
         <ChatSessionWorkspaceFilePreview
           file={file}
           sessionProjectRoot={sessionProjectRoot}
           sessionWorkingDir={sessionWorkingDir}
           showBreadcrumbs={false}
-          onHtmlContentHeightChange={
-            isRenderedHtml ? setHtmlContentHeight : undefined
-          }
           onFileOpen={onFileOpen}
         />
       </div>

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -1,24 +1,29 @@
-import { useEffect, useId, useMemo, useRef } from 'react';
-import type { ChatPanelAppCardViewModel } from '@nextclaw/agent-chat-ui';
-import { AppWindow, Maximize2 } from 'lucide-react';
-import { getPresenter } from '@/app/presenters/app.presenter';
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import type { ChatPanelAppCardViewModel } from "@nextclaw/agent-chat-ui";
+import { Maximize2 } from "lucide-react";
+import { getPresenter } from "@/app/presenters/app.presenter";
 import {
   PANEL_APP_IFRAME_SANDBOX,
   findPanelAppEntryByDisplayId,
   focusPanelAppIframe,
   usePanelApps,
-} from '@/features/panel-apps';
-import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources';
+} from "@/features/panel-apps";
+import { createPanelAppRightPanelResourceTarget } from "@/features/right-panel-resources";
 import {
   createInlinePanelAppCardUrl,
   createFallbackPanelAppContentPath,
   createInlinePanelAppTab,
-} from '@/features/chat/features/message/utils/chat-inline-panel-app-card.utils';
-import { useDocBrowser } from '@/shared/components/doc-browser';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
-import { t } from '@/shared/lib/i18n';
+  readInlinePanelAppContentHeight,
+} from "@/features/chat/features/message/utils/chat-inline-panel-app-card.utils";
+import { ChatInlineContentSurface } from "@/features/chat/features/message/components/chat-inline-content-surface";
+import { useDocBrowser } from "@/shared/components/doc-browser";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
 
-type ChatInlinePanelAppDescriptor = Pick<ChatPanelAppCardViewModel, 'appId' | 'title'>;
+type ChatInlinePanelAppDescriptor = Pick<
+  ChatPanelAppCardViewModel,
+  "appId" | "title"
+>;
 
 export function ChatInlinePanelAppCard({
   panelApp,
@@ -30,26 +35,32 @@ export function ChatInlinePanelAppCard({
   const docBrowser = useDocBrowser();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const iframeId = useId();
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
   const panelApps = usePanelApps();
   const entry = useMemo(
-    () => findPanelAppEntryByDisplayId(panelApps.data?.entries ?? [], panelApp.appId),
+    () =>
+      findPanelAppEntryByDisplayId(
+        panelApps.data?.entries ?? [],
+        panelApp.appId,
+      ),
     [panelApp.appId, panelApps.data?.entries],
   );
   const target = entry ? createPanelAppRightPanelResourceTarget(entry) : null;
   const title = panelApp.title ?? target?.title ?? panelApp.appId;
   const url = panelApps.isLoading
-    ? ''
-    : target?.url ?? createFallbackPanelAppContentPath(panelApp.appId);
+    ? ""
+    : (target?.url ?? createFallbackPanelAppContentPath(panelApp.appId));
   const cardUrl = useMemo(
-    () => (url ? createInlinePanelAppCardUrl(url) : ''),
+    () => (url ? createInlinePanelAppCardUrl(url) : ""),
     [url],
   );
   const tab = useMemo(
-    () => createInlinePanelAppTab({
-      appId: entry?.id ?? panelApp.appId,
-      title,
-      url,
-    }),
+    () =>
+      createInlinePanelAppTab({
+        appId: entry?.id ?? panelApp.appId,
+        title,
+        url,
+      }),
     [entry?.id, panelApp.appId, title, url],
   );
   const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}`;
@@ -70,6 +81,14 @@ export function ChatInlinePanelAppCard({
       return undefined;
     }
     const handleMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) {
+        return;
+      }
+      const nextContentHeight = readInlinePanelAppContentHeight(event.data);
+      if (nextContentHeight !== null) {
+        setContentHeight(nextContentHeight);
+        return;
+      }
       getPresenter().panelAppBridgeManager.handleIframeMessage({
         event,
         iframe: iframeRef.current,
@@ -77,52 +96,43 @@ export function ChatInlinePanelAppCard({
         tab,
       });
     };
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
   }, [iframeInstanceId, tab, url]);
 
   if (!url) {
     return (
-      <div
-        className="h-[320px] min-h-[220px] w-full max-w-[48rem] animate-pulse rounded-lg border border-border bg-muted/45"
-        data-chat-message-wide-content="true"
-      />
+      <ChatInlineContentSurface isLoading>
+        <span className="sr-only">{title}</span>
+      </ChatInlineContentSurface>
     );
   }
 
   return (
-    <div
-      className="w-full max-w-[48rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm"
-      data-chat-message-wide-content="true"
-    >
-      <div className="flex h-9 items-center justify-between gap-2 border-b border-border bg-muted/45 px-2.5">
-        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
-          <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
-          <span className="truncate">{title}</span>
-        </div>
-        {showExpandAction ? (
+    <ChatInlineContentSurface
+      actions={
+        showExpandAction ? (
           <IconActionButton
-            size="md"
+            size="sm"
             icon={<Maximize2 className="h-3.5 w-3.5" />}
-            label={t('chatPanelCardExpand')}
+            label={t("chatPanelCardExpand")}
+            tooltipSide="top"
             onClick={openExpanded}
           />
-        ) : null}
-      </div>
-      <div
-        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-card"
-      >
-        <iframe
-          ref={iframeRef}
-          key={iframeInstanceId}
-          src={cardUrl}
-          title={title}
-          sandbox={PANEL_APP_IFRAME_SANDBOX}
-          tabIndex={0}
-          onPointerOver={() => focusPanelAppIframe(iframeRef.current)}
-          className="h-full w-full border-0 bg-card"
-        />
-      </div>
-    </div>
+        ) : undefined
+      }
+      contentHeight={contentHeight}
+    >
+      <iframe
+        ref={iframeRef}
+        key={iframeInstanceId}
+        src={cardUrl}
+        title={title}
+        sandbox={PANEL_APP_IFRAME_SANDBOX}
+        tabIndex={0}
+        onPointerOver={() => focusPanelAppIframe(iframeRef.current)}
+        className="h-full w-full border-0 bg-card"
+      />
+    </ChatInlineContentSurface>
   );
 }