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

components/block.tsx

@@ -18,7 +18,7 @@ import useSWR, { useSWRConfig } from 'swr';
 import { useDebounceCallback, useWindowSize } from 'usehooks-ts';
 
 import type { Document, Suggestion, Vote } from '@/lib/db/schema';
-import { fetcher } from '@/lib/utils';
+import { cn, fetcher } from '@/lib/utils';
 
 import { DiffView } from './diffview';
 import { DocumentSkeleton } from './document-skeleton';
@@ -29,10 +29,15 @@ import { VersionFooter } from './version-footer';
 import { BlockActions } from './block-actions';
 import { BlockCloseButton } from './block-close-button';
 import { BlockMessages } from './block-messages';
+import { CodeEditor } from './code-editor';
+import { Console } from './console';
+
+export type BlockKind = 'text' | 'code';
 
 export interface UIBlock {
   title: string;
   documentId: string;
+  kind: BlockKind;
   content: string;
   isVisible: boolean;
   status: 'streaming' | 'idle';
@@ -44,6 +49,12 @@ export interface UIBlock {
   };
 }
 
+export interface ConsoleOutput {
+  id: string;
+  status: 'in_progress' | 'completed' | 'failed';
+  content: string | null;
+}
+
 function PureBlock({
   chatId,
   input,
@@ -113,6 +124,9 @@ function PureBlock({
   const [mode, setMode] = useState<'edit' | 'diff'>('edit');
   const [document, setDocument] = useState<Document | null>(null);
   const [currentVersionIndex, setCurrentVersionIndex] = useState(-1);
+  const [consoleOutputs, setConsoleOutputs] = useState<Array<ConsoleOutput>>(
+    [],
+  );
 
   useEffect(() => {
     if (documents && documents.length > 0) {
@@ -158,6 +172,7 @@ function PureBlock({
               body: JSON.stringify({
                 title: block.title,
                 content: updatedContent,
+                kind: block.kind,
               }),
             });
 
@@ -318,7 +333,7 @@ function PureBlock({
       )}
 
       <motion.div
-        className="fixed dark:bg-muted bg-background h-dvh flex flex-col shadow-xl overflow-y-scroll"
+        className="fixed dark:bg-muted bg-background h-dvh flex flex-col overflow-y-scroll"
         initial={
           isMobile
             ? {
@@ -415,15 +430,29 @@ function PureBlock({
             handleVersionChange={handleVersionChange}
             isCurrentVersion={isCurrentVersion}
             mode={mode}
+            setConsoleOutputs={setConsoleOutputs}
           />
         </div>
 
-        <div className="prose dark:prose-invert dark:bg-muted bg-background h-full overflow-y-scroll px-4 py-8 md:p-20 !max-w-full pb-40 items-center">
-          <div className="flex flex-row max-w-[600px] mx-auto">
+        <div
+          className={cn(
+            'prose dark:prose-invert dark:bg-muted bg-background h-full overflow-y-scroll !max-w-full pb-40 items-center',
+            {
+              'py-2 px-2': block.kind === 'code',
+              'py-8 md:p-20 px-4': block.kind === 'text',
+            },
+          )}
+        >
+          <div
+            className={cn('flex flex-row', {
+              '': block.kind === 'code',
+              'mx-auto max-w-[600px]': block.kind === 'text',
+            })}
+          >
             {isDocumentsFetching && !block.content ? (
               <DocumentSkeleton />
-            ) : mode === 'edit' ? (
-              <Editor
+            ) : block.kind === 'code' ? (
+              <CodeEditor
                 content={
                   isCurrentVersion
                     ? block.content
@@ -431,16 +460,31 @@ function PureBlock({
                 }
                 isCurrentVersion={isCurrentVersion}
                 currentVersionIndex={currentVersionIndex}
+                suggestions={suggestions ?? []}
                 status={block.status}
                 saveContent={saveContent}
-                suggestions={isCurrentVersion ? (suggestions ?? []) : []}
               />
-            ) : (
-              <DiffView
-                oldContent={getDocumentContentById(currentVersionIndex - 1)}
-                newContent={getDocumentContentById(currentVersionIndex)}
-              />
-            )}
+            ) : block.kind === 'text' ? (
+              mode === 'edit' ? (
+                <Editor
+                  content={
+                    isCurrentVersion
+                      ? block.content
+                      : getDocumentContentById(currentVersionIndex)
+                  }
+                  isCurrentVersion={isCurrentVersion}
+                  currentVersionIndex={currentVersionIndex}
+                  status={block.status}
+                  saveContent={saveContent}
+                  suggestions={isCurrentVersion ? (suggestions ?? []) : []}
+                />
+              ) : (
+                <DiffView
+                  oldContent={getDocumentContentById(currentVersionIndex - 1)}
+                  newContent={getDocumentContentById(currentVersionIndex)}
+                />
+              )
+            ) : null}
 
             {suggestions ? (
               <div className="md:hidden h-dvh w-12 shrink-0" />
@@ -455,6 +499,7 @@ function PureBlock({
                   isLoading={isLoading}
                   stop={stop}
                   setMessages={setMessages}
+                  blockKind={block.kind}
                 />
               )}
             </AnimatePresence>
@@ -471,6 +516,13 @@ function PureBlock({
             />
           )}
         </AnimatePresence>
+
+        <AnimatePresence>
+          <Console
+            consoleOutputs={consoleOutputs}
+            setConsoleOutputs={setConsoleOutputs}
+          />
+        </AnimatePresence>
       </motion.div>
     </motion.div>
   );