diff --git a/packages/client/src/components/HTMLResourceRenderer.tsx b/packages/client/src/components/HTMLResourceRenderer.tsx
index 78cdaa56..e68846e1 100644
--- a/packages/client/src/components/HTMLResourceRenderer.tsx
+++ b/packages/client/src/components/HTMLResourceRenderer.tsx
@@ -7,15 +7,19 @@ export type HTMLResourceRendererProps = {
resource: Partial;
onUIAction?: (result: UIActionResult) => Promise;
style?: React.CSSProperties;
- iframeProps?: Omit, 'src' | 'srcDoc' | 'ref' | 'style'>;
+ iframeProps?: Omit, 'src' | 'srcDoc' | 'style'> & {
+ ref?: React.RefObject;
+ };
};
-export const HTMLResourceRenderer = React.forwardRef<
- HTMLIFrameElement | null,
- HTMLResourceRendererProps
->(({ resource, onUIAction, style, iframeProps }, ref) => {
+export const HTMLResourceRenderer = ({
+ resource,
+ onUIAction,
+ style,
+ iframeProps,
+}: HTMLResourceRendererProps) => {
const iframeRef = useRef(null);
- useImperativeHandle(ref, () => iframeRef.current as HTMLIFrameElement);
+ useImperativeHandle(iframeProps?.ref, () => iframeRef.current as HTMLIFrameElement);
const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
() => processHTMLResource(resource),
@@ -78,6 +82,6 @@ export const HTMLResourceRenderer = React.forwardRef<
}
return Initializing HTML resource display...
;
-});
+};
HTMLResourceRenderer.displayName = 'HTMLResourceRenderer';
diff --git a/packages/client/src/components/UIResourceRenderer.tsx b/packages/client/src/components/UIResourceRenderer.tsx
index 5a6485eb..f2e3ff0a 100644
--- a/packages/client/src/components/UIResourceRenderer.tsx
+++ b/packages/client/src/components/UIResourceRenderer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Resource } from '@modelcontextprotocol/sdk/types.js';
import { ResourceContentType, UIActionResult } from '../types';
import { HTMLResourceRenderer, HTMLResourceRendererProps } from './HTMLResourceRenderer';
@@ -29,10 +28,7 @@ function getContentType(resource: Partial): ResourceContentType | unde
}
}
-export const UIResourceRenderer = React.forwardRef<
- HTMLIFrameElement | null,
- UIResourceRendererProps
->((props, ref) => {
+export const UIResourceRenderer = (props: UIResourceRendererProps) => {
const { resource, onUIAction, supportedContentTypes, htmlProps, remoteDomProps } = props;
const contentType = getContentType(resource);
@@ -42,15 +38,9 @@ export const UIResourceRenderer = React.forwardRef<
switch (contentType) {
case 'rawHtml':
- case 'externalUrl':
- return (
-
- );
+ case 'externalUrl': {
+ return ;
+ }
case 'remoteDom':
return (
Unsupported resource type.
;
}
-});
+};
UIResourceRenderer.displayName = 'UIResourceRenderer';
diff --git a/packages/client/src/components/__tests__/HTMLResourceRenderer.test.tsx b/packages/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
index 556aac55..3133ed01 100644
--- a/packages/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
+++ b/packages/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
@@ -291,7 +291,7 @@ describe('HTMLResource iframe communication', () => {
it('should pass ref to iframe', () => {
const ref = React.createRef();
- render();
+ render();
expect(ref.current).toBeInTheDocument();
});
diff --git a/packages/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx b/packages/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
index 69a5191c..759a745f 100644
--- a/packages/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
+++ b/packages/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
@@ -12,7 +12,7 @@ describe('UIResourceRenderer', () => {
};
it('should pass ref to HTMLResourceRenderer', () => {
const ref = React.createRef();
- render();
+ render();
expect(ref.current).toBeInTheDocument();
});
});