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

feat: ai elements (#1143)

Browse source
This commit is contained in:
josh 2025-08-28 14:15:36 +01:00 • committed by GitHub
parent 66e8227655
commit f09be3f286
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 3558 additions and 500 deletions
Download patch file Download diff file Expand all files Collapse all files

29
components/console.tsx
View file

@ -1,8 +1,9 @@
import { TerminalWindowIcon, LoaderIcon, CrossSmallIcon } from './icons';
import { TerminalWindowIcon, CrossSmallIcon } from './icons';
import { Loader } from './elements/loader';
import { Button } from './ui/button';
import {
Dispatch,
SetStateAction,
type Dispatch,
type SetStateAction,
useCallback,
useEffect,
useRef,
@ -79,7 +80,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
return consoleOutputs.length > 0 ? (
<>
<div
className="h-2 w-full fixed cursor-ns-resize z-50"
className="fixed z-50 w-full h-2 cursor-ns-resize"
onMouseDown={startResizing}
style={{ bottom: height - 4 }}
role="slider"
@ -88,15 +89,15 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
<div
className={cn(
'fixed flex flex-col bottom-0 dark:bg-zinc-900 bg-zinc-50 w-full border-t z-40 overflow-y-scroll overflow-x-hidden dark:border-zinc-700 border-zinc-200',
'flex overflow-x-hidden overflow-y-scroll fixed bottom-0 z-40 flex-col w-full border-t dark:bg-zinc-900 bg-zinc-50 dark:border-zinc-700 border-zinc-200',
{
'select-none': isResizing,
},
)}
style={{ height }}
>
<div className="flex flex-row justify-between items-center w-full h-fit border-b dark:border-zinc-700 border-zinc-200 px-2 py-1 sticky top-0 z-50 bg-muted">
<div className="text-sm pl-2 dark:text-zinc-50 text-zinc-800 flex flex-row gap-3 items-center">
<div className="flex sticky top-0 z-50 flex-row justify-between items-center px-2 py-1 w-full border-b h-fit dark:border-zinc-700 border-zinc-200 bg-muted">
<div className="flex flex-row gap-3 items-center pl-2 text-sm dark:text-zinc-50 text-zinc-800">
<div className="text-muted-foreground">
<TerminalWindowIcon />
</div>
@ -104,7 +105,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
</div>
<Button
variant="ghost"
className="size-fit p-1 hover:dark:bg-zinc-700 hover:bg-zinc-200"
className="p-1 size-fit hover:dark:bg-zinc-700 hover:bg-zinc-200"
size="icon"
onClick={() => setConsoleOutputs([])}
>
@ -116,7 +117,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
{consoleOutputs.map((consoleOutput, index) => (
<div
key={consoleOutput.id}
className="px-4 py-2 flex flex-row text-sm border-b dark:border-zinc-700 border-zinc-200 dark:bg-zinc-900 bg-zinc-50 font-mono"
className="flex flex-row px-4 py-2 font-mono text-sm border-b dark:border-zinc-700 border-zinc-200 dark:bg-zinc-900 bg-zinc-50"
>
<div
className={cn('w-12 shrink-0', {
@ -134,8 +135,8 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
consoleOutput.status,
) ? (
<div className="flex flex-row gap-2">
<div className="animate-spin size-fit self-center mb-auto mt-0.5">
<LoaderIcon />
<div className="size-fit self-center mb-auto mt-0.5">
<Loader size={16} />
</div>
<div className="text-muted-foreground">
{consoleOutput.status === 'in_progress'
@ -148,20 +149,20 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
</div>
</div>
) : (
<div className="dark:text-zinc-50 text-zinc-900 w-full flex flex-col gap-2 overflow-x-scroll">
<div className="flex overflow-x-scroll flex-col gap-2 w-full dark:text-zinc-50 text-zinc-900">
{consoleOutput.contents.map((content, index) =>
content.type === 'image' ? (
<picture key={`${consoleOutput.id}-${index}`}>
<img
src={content.value}
alt="output"
className="rounded-md max-w-screen-toast-mobile w-full"
className="w-full rounded-md max-w-screen-toast-mobile"
/>
</picture>
) : (
<div
key={`${consoleOutput.id}-${index}`}
className="whitespace-pre-line break-words w-full"
className="w-full whitespace-pre-line break-words"
>
{content.value}
</div>