feat: add code and text block types (#609)

2024-12-16 18:14:40 +05:30 · 2024-12-16 18:14:40 +05:30 · 9778631d6f
commit 9778631d6f
parent 3df0fd4c0f
27 changed files with 1754 additions and 290 deletions
--- a/components/console.tsx
+++ b/components/console.tsx
@ -0,0 +1,126 @@
+import { TerminalWindowIcon, LoaderIcon, CrossSmallIcon } from './icons';
+import { Button } from './ui/button';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { ConsoleOutput } from './block';
+import { cn } from '@/lib/utils';
+
+interface ConsoleProps {
+  consoleOutputs: Array<ConsoleOutput>;
+  setConsoleOutputs: Dispatch<SetStateAction<Array<ConsoleOutput>>>;
+}
+
+export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
+  const [height, setHeight] = useState<number>(300);
+  const [isResizing, setIsResizing] = useState(false);
+  const consoleEndRef = useRef<HTMLDivElement>(null);
+
+  const minHeight = 100;
+  const maxHeight = 800;
+
+  const startResizing = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = useCallback(
+    (e: MouseEvent) => {
+      if (isResizing) {
+        const newHeight = window.innerHeight - e.clientY;
+        if (newHeight >= minHeight && newHeight <= maxHeight) {
+          setHeight(newHeight);
+        }
+      }
+    },
+    [isResizing],
+  );
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResizing);
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resize, stopResizing]);
+
+  useEffect(() => {
+    consoleEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [consoleOutputs]);
+
+  return consoleOutputs.length > 0 ? (
+    <>
+      <div
+        className="h-2 w-full fixed cursor-ns-resize z-50"
+        onMouseDown={startResizing}
+        style={{ bottom: height - 4 }}
+      />
+
+      <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 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="text-muted-foreground">
+              <TerminalWindowIcon />
+            </div>
+            <div>Console</div>
+          </div>
+          <Button
+            variant="ghost"
+            className="size-fit p-1 hover:dark:bg-zinc-700 hover:bg-zinc-200"
+            size="icon"
+            onClick={() => setConsoleOutputs([])}
+          >
+            <CrossSmallIcon />
+          </Button>
+        </div>
+
+        <div>
+          {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"
+            >
+              <div
+                className={cn('w-12 shrink-0', {
+                  'text-muted-foreground':
+                    consoleOutput.status === 'in_progress',
+                  '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 />
+                </div>
+              ) : (
+                <div className="dark:text-zinc-50 text-zinc-900 whitespace-pre-line">
+                  {consoleOutput.content}
+                </div>
+              )}
+            </div>
+          ))}
+          <div ref={consoleEndRef} />
+        </div>
+      </div>
+    </>
+  ) : null;
+}