Refactor: Layout and update OpenAI model (#29)

* refactor: update to gpt-4.5

* refactor: layout

* refactor: openai streamer to work better with actions array

* chore: remove anthropic implementation

* fix: layout breakpoint changes mismatch

* improve: reduce default sleep after async action

* Delete bun.lock

Author: ben-fornefeld

app/api/chat/route.ts

@@ -1,35 +1,15 @@
 import { Sandbox } from "@e2b/desktop";
-import { ComputerModel, SSEEvent, SSEEventType } from "@/types/api";
+import { SSEEvent, SSEEventType } from "@/types/api";
 import {
   ComputerInteractionStreamerFacade,
   createStreamingResponse,
 } from "@/lib/streaming";
 import { SANDBOX_TIMEOUT_MS } from "@/lib/config";
 import { OpenAIComputerStreamer } from "@/lib/streaming/openai";
 import { logError } from "@/lib/logger";
-import { ResolutionScaler } from "@/lib/streaming/resolution";
 
 export const maxDuration = 800;
 
-class StreamerFactory {
-  static getStreamer(
-    model: ComputerModel,
-    desktop: Sandbox,
-    resolution: [number, number]
-  ): ComputerInteractionStreamerFacade {
-    const resolutionScaler = new ResolutionScaler(desktop, resolution);
-
-    switch (model) {
-      case "anthropic":
-      // currently not implemented
-      /* return new AnthropicComputerStreamer(desktop, resolutionScaler); */
-      case "openai":
-      default:
-        return new OpenAIComputerStreamer(desktop, resolutionScaler);
-    }
-  }
-}
-
 export async function POST(request: Request) {
   const abortController = new AbortController();
   const { signal } = abortController;
@@ -42,7 +22,6 @@ export async function POST(request: Request) {
     messages,
     sandboxId,
     resolution,
-    model = "openai",
   } = await request.json();
 
   const apiKey = process.env.E2B_API_KEY;
@@ -79,14 +58,11 @@ export async function POST(request: Request) {
     desktop.setTimeout(SANDBOX_TIMEOUT_MS);
 
     try {
-      const streamer = StreamerFactory.getStreamer(
-        model as ComputerModel,
-        desktop,
-        resolution
-      );
+      const streamer: ComputerInteractionStreamerFacade =
+        new OpenAIComputerStreamer(desktop, resolution);
 
       if (!sandboxId && activeSandboxId && vncUrl) {
-        async function* stream(): AsyncGenerator<SSEEvent<typeof model>> {
+        async function* stream(): AsyncGenerator<SSEEvent> {
           yield {
             type: SSEEventType.SANDBOX_CREATED,
             sandboxId: activeSandboxId,

app/page.tsx

@@ -198,10 +198,10 @@ export default function Home() {
   }, [onSandboxCreated]);
 
   return (
-    <div className="w-full h-dvh overflow-hidden p-2 sm:p-4 md:p-8 md:pb-10">
+    <div className="w-full flex justify-center items-center h-dvh overflow-hidden p-2 sm:p-4 md:p-8 md:pb-10">
       <Frame
         classNames={{
-          wrapper: "w-full h-full",
+          wrapper: "w-full max-lg:h-full lg:aspect-[18/9] max-w-[2000px]",
           frame: "flex flex-col h-full overflow-hidden",
         }}
       >
@@ -239,7 +239,7 @@ export default function Home() {
             </Button>
           </div>
 
-          <div className="hidden md:flex items-center gap-2">
+          <div className="hidden lg:flex items-center gap-2">
             <ThemeToggle />
             <RepoBanner />
 
@@ -262,14 +262,12 @@ export default function Home() {
                     }
                   >
                     <Timer
-                      className={`h-3 w-3 ${
-                        !isTabVisible ? "text-fg-400" : ""
-                      }`}
+                      className={`h-3 w-3 ${!isTabVisible ? "text-fg-400" : ""
+                        }`}
                     />
                     <span
-                      className={`text-xs font-medium ${
-                        !isTabVisible ? "text-fg-400" : ""
-                      }`}
+                      className={`text-xs font-medium ${!isTabVisible ? "text-fg-400" : ""
+                        }`}
                     >
                       {Math.floor(timeRemaining / 60)}:
                       {(timeRemaining % 60).toString().padStart(2, "0")}
@@ -290,7 +288,7 @@ export default function Home() {
             </AnimatePresence>
           </div>
 
-          <div className="md:hidden flex items-center">
+          <div className="lg:hidden flex items-center">
             <AnimatePresence>
               {sandboxId && (
                 <motion.div
@@ -312,14 +310,12 @@ export default function Home() {
                     className="px-1.5"
                   >
                     <Timer
-                      className={`h-3 w-3 ${
-                        !isTabVisible ? "text-fg-400" : ""
-                      }`}
+                      className={`h-3 w-3 ${!isTabVisible ? "text-fg-400" : ""
+                        }`}
                     />
                     <span
-                      className={`text-xs font-medium ml-1 ${
-                        !isTabVisible ? "text-fg-400" : ""
-                      }`}
+                      className={`text-xs font-medium ml-1 ${!isTabVisible ? "text-fg-400" : ""
+                        }`}
                     >
                       {Math.floor(timeRemaining / 60)}:
                       {(timeRemaining % 60).toString().padStart(2, "0")}
@@ -343,7 +339,7 @@ export default function Home() {
         <AnimatePresence>
           {mobileMenuOpen && (
             <motion.div
-              className="md:hidden border-b p-2 flex items-center justify-between"
+              className="lg:hidden border-b p-2 flex items-center justify-between"
               initial={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: "auto" }}
               exit={{ opacity: 0, height: 0 }}
@@ -357,10 +353,10 @@ export default function Home() {
           )}
         </AnimatePresence>
 
-        <div className="flex flex-col md:flex-row flex-1 overflow-hidden">
+        <div className="flex flex-col lg:flex-row flex-1 overflow-hidden">
           <div
             ref={iFrameWrapperRef}
-            className="relative w-full md:flex-1 h-[40vh] md:h-auto overflow-hidden"
+            className="relative w-full lg:flex-1 h-[40vh] lg:h-auto overflow-hidden"
           >
             {isLoading || (chatLoading && !sandboxId) ? (
               <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
@@ -411,7 +407,7 @@ export default function Home() {
             )}
           </div>
 
-          <div className="flex-1 flex flex-col relative border-t md:border-t-0 md:border-l overflow-hidden h-[60vh] md:h-auto md:max-w-xl">
+          <div className="flex-1 flex flex-col relative border-t lg:border-t-0 lg:border-l overflow-hidden h-[60vh] lg:h-auto lg:max-w-xl">
             <ChatList className="flex-1" messages={messages} />
 
             {messages.length === 0 && (

components/chat/input.tsx

@@ -1,21 +1,10 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { OpenAiLogo } from "@phosphor-icons/react";
 import { ChevronsRight, StopCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-} from "../ui/select";
-import { useChat } from "@/lib/chat-context";
 import { Input } from "../ui/input";
-import { AnthropicLogo } from "../icons";
 import { motion } from "motion/react";
 
 interface ChatInputProps {
@@ -42,34 +31,12 @@ export function ChatInput({
   placeholder = "What are we surfing today?",
   className,
 }: ChatInputProps) {
-  const { model, setModel } = useChat();
-
   const isInputEmpty = useMemo(() => input.trim() === "", [input]);
 
   return (
     <form onSubmit={onSubmit} className={cn(className)}>
       <div className="flex items-center">
         <div className="relative flex-1 flex items-center gap-2">
-          {/* CURRENTLY NOT USED */}
-          {/*  <Select value={model} onValueChange={setModel} disabled={disabled}>
-            <SelectTrigger
-              className="absolute rounded-lg left-1.5 z-10 inset-y-1.5 border-border-200 w-min aspect-square h-auto flex items-center justify-center hover:bg-bg focus:bg-bg"
-              withIcon={false}
-            >
-              {model == "openai" ? (
-                <OpenAiLogo className="size-5" />
-              ) : (
-                <AnthropicLogo className="size-5" />
-              )}
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Model</SelectLabel>
-                <SelectItem value="openai">OpenAI</SelectItem>
-                <SelectItem value="anthropic">Anthropic</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select> */}
           <Input
             placeholder={placeholder}
             value={input}

components/chat/message.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import {
   ChatMessage as ChatMessageType,
   ActionChatMessage,
-  AssistantChatMessage,
 } from "@/types/chat";
 import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
@@ -17,10 +16,8 @@ import {
   User,
   Info,
 } from "lucide-react";
-import { useChat } from "@/lib/chat-context";
 import { Badge } from "../ui/badge";
 import { OpenAiLogo } from "@phosphor-icons/react";
-import { AnthropicLogo } from "../icons";
 
 const messageVariants = cva("", {
   variants: {
@@ -47,11 +44,15 @@ function ActionMessageDisplay({
   message: ActionChatMessage;
   className?: string;
 }) {
-  const { action, status } = message;
+  const { action, repeatCount, status } = message;
 
-  const formatAction = (action: any): string => {
+  const formatAction = (action: any, repeats?: number): string => {
     if (!action) return "No action details";
 
+    if (action.type === "wait") {
+      return repeats && repeats > 1 ? `wait x${repeats}` : "wait";
+    }
+
     try {
       return JSON.stringify(action, null, 2);
     } catch (e) {
@@ -91,7 +92,7 @@ function ActionMessageDisplay({
           </div>
 
           <div className="bg-bg-200 dark:bg-bg-300 p-2 rounded font-mono text-xs tracking-wide text-fg-100 overflow-x-auto mb-3">
-            <code>{formatAction(action)}</code>
+            <code>{formatAction(action, repeatCount)}</code>
           </div>
         </CardContent>
       </Card>
@@ -108,8 +109,6 @@ export function ChatMessage({ message, className }: ChatMessageProps) {
   const isSystem = role === "system";
   const isError = "isError" in message && message.isError;
 
-  const { model } = useChat();
-
   if (isSystem) {
     return (
       <div className={cn("w-full flex justify-center", className)}>
@@ -121,7 +120,7 @@ export function ChatMessage({ message, className }: ChatMessageProps) {
   if (isAction) {
     return (
       <ActionMessageDisplay
-        message={message as ActionChatMessage<typeof model>}
+        message={message as ActionChatMessage}
         className={className}
       />
     );
@@ -130,11 +129,7 @@ export function ChatMessage({ message, className }: ChatMessageProps) {
   const getRoleIcon = () => {
     if (isUser) return <User className="h-3 w-3" />;
     if (isAssistant) {
-      if ((message as AssistantChatMessage).model === "openai") {
-        return <OpenAiLogo className="h-3 w-3" />;
-      } else {
-        return <AnthropicLogo className="h-3 w-3" />;
-      }
+      return <OpenAiLogo className="h-3 w-3" />;
     }
     return <Info className="h-3 w-3" />;
   };

components/icons.tsx

@@ -188,33 +188,3 @@ export const InvoiceIcon = ({ size = 16 }: { size: number }) => {
     </svg>
   );
 };
-
-export const AnthropicLogo = ({
-  size = 16,
-  className,
-}: {
-  size?: number;
-  className?: string;
-}) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      version="1.1"
-      id="Layer_1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 92.2 65"
-      className={className}
-    >
-      <style>{`.st0{fill:currentColor;}`}</style>
-      <path
-        className="st0"
-        d="M66.5,0H52.4l25.7,65h14.1L66.5,0z M25.7,0L0,65h14.4l5.3-13.6h26.9L51.8,65h14.4L40.5,0C40.5,0,25.7,0,25.7,0z
-        M24.3,39.3l8.8-22.8l8.8,22.8H24.3z"
-      />
-    </svg>
-  );
-};