dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: support image outputs during code execution (#674)

Browse source 
Co-authored-by: Bailey Simrell <baileysimrell@gmail.com>
This commit is contained in:
Jeremy 2025-01-08 00:00:21 +05:30 • committed by GitHub
parent 50fbc0dab2
commit 50bd4604b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 313 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/console.tsx
View file

@ -101,21 +101,51 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
>
<div
className={cn('w-12 shrink-0', {
'text-muted-foreground':
consoleOutput.status === 'in_progress',
'text-muted-foreground': [
'in_progress',
'loading_packages',
].includes(consoleOutput.status),
'text-emerald-500': consoleOutput.status === 'completed',
'text-red-400': consoleOutput.status === 'failed',
})}
>
[{index + 1}]
</div>
{consoleOutput.status === 'in_progress' ? (
<div className="animate-spin size-fit self-center">
<LoaderIcon />
{['in_progress', 'loading_packages'].includes(
consoleOutput.status,
) ? (
<div className="flex flex-row gap-2">
<div className="animate-spin size-fit self-center">
<LoaderIcon />
</div>
<div className="text-muted-foreground">
{consoleOutput.status === 'in_progress'
? 'Initializing...'
: consoleOutput.status === 'loading_packages'
? 'Loading Packages...'
: null}
</div>
</div>
) : (
<div className="dark:text-zinc-50 text-zinc-900 whitespace-pre-line">
{consoleOutput.content}
<div className="dark:text-zinc-50 text-zinc-900 w-full flex flex-col gap-2">
{consoleOutput.contents.map((content, index) =>
content.type === 'image' ? (
<picture key={`${consoleOutput.id}-${index}`}>
<img
src={content.value}
alt="output"
className="rounded-md max-w-[600px] w-full"
/>
</picture>
) : (
<div
key={`${consoleOutput.id}-${index}`}
className="whitespace-pre-line"
>
{content.value}
</div>
),
)}
</div>
)}
</div>