feat(markdown): open mermaid fullscreen preview on diagram click in chat
Thread onShowPopup from MessageBody through AssistantTextPart into the markdown renderer so clicking a rendered mermaid diagram in assistant messages opens the existing pan/zoom fullscreen preview dialog.
This commit is contained in:
@@ -1696,6 +1696,7 @@ const AssistantMessageBody = React.memo(({
|
|||||||
streamPhase={effectiveStreamPhase}
|
streamPhase={effectiveStreamPhase}
|
||||||
chatRenderMode={chatRenderMode}
|
chatRenderMode={chatRenderMode}
|
||||||
onContentChange={onContentChange}
|
onContentChange={onContentChange}
|
||||||
|
onShowPopup={onShowPopup}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -1730,6 +1731,7 @@ const AssistantMessageBody = React.memo(({
|
|||||||
streamPhase={effectiveStreamPhase}
|
streamPhase={effectiveStreamPhase}
|
||||||
chatRenderMode={chatRenderMode}
|
chatRenderMode={chatRenderMode}
|
||||||
onContentChange={onContentChange}
|
onContentChange={onContentChange}
|
||||||
|
onShowPopup={onShowPopup}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else if (groupReasoningBlocks) {
|
} else if (groupReasoningBlocks) {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import type { Part } from '@opencode-ai/sdk/v2';
|
import type { Part } from '@opencode-ai/sdk/v2';
|
||||||
import { MarkdownRenderer } from '../../MarkdownRenderer';
|
import { MarkdownRenderer } from '../../MarkdownRenderer';
|
||||||
import type { StreamPhase } from '../types';
|
import type { StreamPhase, ToolPopupContent } from '../types';
|
||||||
import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
|
import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
|
||||||
import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
|
import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
|
||||||
import { resolveAssistantDisplayText, shouldRenderAssistantText } from './assistantTextVisibility';
|
import { resolveAssistantDisplayText, shouldRenderAssistantText } from './assistantTextVisibility';
|
||||||
@@ -18,6 +18,7 @@ interface AssistantTextPartProps {
|
|||||||
streamPhase: StreamPhase;
|
streamPhase: StreamPhase;
|
||||||
chatRenderMode?: 'sorted' | 'live';
|
chatRenderMode?: 'sorted' | 'live';
|
||||||
onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
|
onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
|
||||||
|
onShowPopup?: (content: ToolPopupContent) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AssistantTextPart: React.FC<AssistantTextPartProps> = ({
|
const AssistantTextPart: React.FC<AssistantTextPartProps> = ({
|
||||||
@@ -25,6 +26,7 @@ const AssistantTextPart: React.FC<AssistantTextPartProps> = ({
|
|||||||
messageId,
|
messageId,
|
||||||
streamPhase,
|
streamPhase,
|
||||||
chatRenderMode = 'live',
|
chatRenderMode = 'live',
|
||||||
|
onShowPopup,
|
||||||
}) => {
|
}) => {
|
||||||
// Use part directly from props — parent provides the latest version from the store.
|
// Use part directly from props — parent provides the latest version from the store.
|
||||||
// No store subscription here to avoid re-render cascade from unrelated delta events.
|
// No store subscription here to avoid re-render cascade from unrelated delta events.
|
||||||
@@ -99,6 +101,7 @@ const AssistantTextPart: React.FC<AssistantTextPartProps> = ({
|
|||||||
disableStreamAnimation={chatRenderMode === 'sorted'}
|
disableStreamAnimation={chatRenderMode === 'sorted'}
|
||||||
variant={part.type === 'reasoning' ? 'reasoning' : 'assistant'}
|
variant={part.type === 'reasoning' ? 'reasoning' : 'assistant'}
|
||||||
enableFileReferences={isFinalized}
|
enableFileReferences={isFinalized}
|
||||||
|
onShowPopup={onShowPopup}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user