shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: inline image display with lightbox

Browse Source 
- Add image block type for base64 and URL images
- Parse image/image_url blocks from gateway history
- Render images inline in chat messages (rounded, dark-themed)
- Click-to-zoom lightbox with Escape to close
- Markdown images also use the lightbox component
- Detect base64 images in tool results (e.g. Read tool on image files)
- Support png, jpg, gif, webp formats
This commit is contained in:
Nicolas Varrot
2026-02-11 17:18:10 +00:00
parent 375302a27b
commit 762a5f2026
6 changed files with 158 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ChatMessage.tsx
View File

@@ -6,6 +6,7 @@ import type { ChatMessage as ChatMessageType, MessageBlock } from '../types';
import { ThinkingBlock } from './ThinkingBlock';
import { CodeBlock } from './CodeBlock';
import { ToolCall } from './ToolCall';
import { ImageBlock, buildImageSrc } from './ImageBlock';
import { Bot, User, Wrench } from 'lucide-react';
import { t, getLocale } from '../lib/i18n';
import { useLocale } from '../hooks/useLocale';
@@ -127,11 +128,19 @@ function getTextBlocks(blocks: MessageBlock[]): MessageBlock[] {
return blocks.filter(b => b.type === 'text' && b.text.trim());
}
function getImageBlocks(blocks: MessageBlock[]): MessageBlock[] {
return blocks.filter(b => b.type === 'image');
}
function getInternalBlocks(blocks: MessageBlock[]): MessageBlock[] {
return blocks.filter(b => b.type === 'thinking' || b.type === 'tool_use' || b.type === 'tool_result');
}
const markdownComponents = { pre: CodeBlock };
function MarkdownImage(props: React.ImgHTMLAttributes<HTMLImageElement>) {
return <ImageBlock src={props.src || ''} alt={props.alt} />;
}
const markdownComponents = { pre: CodeBlock, img: MarkdownImage };
function renderTextBlocks(blocks: MessageBlock[]) {
return getTextBlocks(blocks).map((block, i) => (
@@ -143,6 +152,15 @@ function renderTextBlocks(blocks: MessageBlock[]) {
));
}
function renderImageBlocks(blocks: MessageBlock[]) {
return getImageBlocks(blocks).map((block, i) => {
const b = block as { type: 'image'; mediaType: string; data?: string; url?: string };
const src = buildImageSrc(b.mediaType, b.data, b.url);
if (!src) return null;
return <ImageBlock key={`img-${i}`} src={src} alt="Image" />;
});
}
function renderInternalBlocks(blocks: MessageBlock[]) {
const elements: React.ReactElement[] = [];
const internals = getInternalBlocks(blocks);
@@ -201,7 +219,8 @@ export function ChatMessageComponent({ message }: { message: ChatMessageType })
// Assistant message with no text content — only tool calls / thinking
if (!isUser && message.blocks.length > 0) {
const textBlocks = getTextBlocks(message.blocks);
const hasText = textBlocks.length > 0 || (message.isStreaming && message.content?.trim());
const imageBlocks = getImageBlocks(message.blocks);
const hasText = textBlocks.length > 0 || imageBlocks.length > 0 || (message.isStreaming && message.content?.trim());
if (!hasText && !message.isStreaming) {
return <InternalOnlyMessage message={message} />;
}
@@ -233,6 +252,9 @@ export function ChatMessageComponent({ message }: { message: ChatMessageType })
</div>
)}
{/* Inline images */}
{renderImageBlocks(message.blocks)}
{/* Streaming dots */}
{message.isStreaming && (
<div className="flex gap-1 mt-2">

64
src/components/ImageBlock.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { useState, useEffect, useCallback } from 'react';
import { X } from 'lucide-react';
interface ImageBlockProps {
src: string;
alt?: string;
}
function Lightbox({ src, alt, onClose }: ImageBlockProps & { onClose: () => void }) {
const handleKey = useCallback((e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
}, [onClose]);
useEffect(() => {
document.addEventListener('keydown', handleKey);
return () => document.removeEventListener('keydown', handleKey);
}, [handleKey]);
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
onClick={onClose}
>
<button
onClick={onClose}
className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800/80 border border-white/10 text-zinc-300 hover:text-white hover:bg-zinc-700/80 transition-colors"
>
<X size={20} />
</button>
<img
src={src}
alt={alt || 'Image'}
className="max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl"
onClick={(e) => e.stopPropagation()}
/>
</div>
);
}
export function ImageBlock({ src, alt }: ImageBlockProps) {
const [lightbox, setLightbox] = useState(false);
return (
<>
<div className="my-2">
<img
src={src}
alt={alt || 'Image'}
className="max-w-full max-h-80 rounded-xl border border-white/8 cursor-pointer hover:brightness-110 transition-all"
onClick={() => setLightbox(true)}
loading="lazy"
/>
</div>
{lightbox && <Lightbox src={src} alt={alt} onClose={() => setLightbox(false)} />}
</>
);
}
/** Build a data URL from base64 image data */
export function buildImageSrc(mediaType: string, data?: string, url?: string): string {
if (url) return url;
if (data) return `data:${mediaType};base64,${data}`;
return '';
}

59
src/components/ToolCall.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react';
import { ChevronRight, ChevronDown, Terminal, Globe, Search, FileText, Wrench, Code, Database, Image, MessageSquare, Brain, Cpu } from 'lucide-react';
import hljs from 'highlight.js/lib/common';
import { useT } from '../hooks/useLocale';
import { ImageBlock } from './ImageBlock';
type ToolColor = { border: string; bg: string; text: string; icon: string; glow: string; expandBorder: string; expandBg: string };
@@ -148,6 +149,31 @@ function truncate(s: string, max: number): string {
return clean.length <= max ? clean : clean.slice(0, max) + '…';
}
/** Detect if a tool result contains a base64 image and extract it */
function extractImageFromResult(result: string): { src: string; remaining: string } | null {
if (!result) return null;
// Match "data:image/..." URLs
const dataUrlMatch = result.match(/(data:image\/[a-z+]+;base64,[A-Za-z0-9+/=\s]+)/);
if (dataUrlMatch) {
const src = dataUrlMatch[1].replace(/\s/g, '');
const remaining = result.replace(dataUrlMatch[0], '').trim();
return { src, remaining };
}
// Match raw base64 after image file markers (e.g. from Read tool returning an image)
const readImageMatch = result.match(/^.*?\[image\/(png|jpeg|jpg|gif|webp)\].*$/m);
if (readImageMatch) {
const mediaType = `image/${readImageMatch[1]}`;
// Look for a large base64 block after it
const afterMarker = result.slice(result.indexOf(readImageMatch[0]) + readImageMatch[0].length);
const b64Match = afterMarker.match(/([A-Za-z0-9+/=\n]{100,})/);
if (b64Match) {
const data = b64Match[1].replace(/\n/g, '');
return { src: `data:${mediaType};base64,${data}`, remaining: readImageMatch[0] };
}
}
return null;
}
export function ToolCall({ name, input, result }: { name: string; input?: any; result?: string }) {
const t = useT();
const [open, setOpen] = useState(false);
@@ -188,15 +214,30 @@ export function ToolCall({ name, input, result }: { name: string; input?: any; r
/>
</div>
)}
{result && (
<div>
<div className={`text-[11px] ${c.text} opacity-70 mb-1 font-medium`}>{t('tool.result')}</div>
<HighlightedPre
text={result}
className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 max-h-64 overflow-y-auto font-mono"
/>
</div>
)}
{result && (() => {
const imageData = extractImageFromResult(result);
return (
<div>
<div className={`text-[11px] ${c.text} opacity-70 mb-1 font-medium`}>{t('tool.result')}</div>
{imageData ? (
<>
{imageData.remaining && (
<HighlightedPre
text={imageData.remaining}
className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono mb-2"
/>
)}
<ImageBlock src={imageData.src} alt={`${name} result`} />
</>
) : (
<HighlightedPre
text={result}
className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 max-h-64 overflow-y-auto font-mono"
/>
)}
</div>
);
})()}
</div>
)}
</div>