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(); }); });