feat: Agent Playground

apps/web/src/core/components/Chat.tsx

@@ -4,7 +4,7 @@ import { Button } from "./Button"
 import { ChatLine, LoadingChatLine } from "./ChatLine"
 import { InputMessage } from "./InputMessage"
 import { DISCORD_URL, EXTENSION_CHROME_URL } from "./common"
-import { initialMessages, useWindowAI } from "./hooks/useWindowAI"
+import { initialMessages, useWindowAI } from "../hooks/useWindowAI"
 import { GetExtensionButton } from "~core/components/GetExtensionButton"
 
 const COOKIE_NAME = "nextjs-example-ai-chat-gpt3"
@@ -46,8 +46,8 @@ export function Chat() {
   }, [messages])
 
   return (
-    <div className="w-full pt-10">
-      <div className="rounded-lg border-slate-11 border p-6 w-full h-[360px] flex flex-col">
+    <div className="w-full h-full pt-10">
+      <div className="rounded-lg border-slate-11 border p-6 w-full h-full md:h-[320px] flex flex-col">
         <div className="flex-grow overflow-y-auto pr-8 pl-4" ref={messagesRef}>
           {messages.map(({ content, role }, index) => (
             <ChatLine key={index} role={role} content={content} />

apps/web/src/core/components/CodeBlock.tsx

@@ -1,10 +1,13 @@
-import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"
-import { type FC, memo, useState } from "react"
+// use client
+import { IconCheck, IconClipboard } from "@tabler/icons-react"
+import clsx from "clsx"
+import { useMemo, useState, type FC } from "react"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import {
   oneDark,
   oneLight
 } from "react-syntax-highlighter/dist/cjs/styles/prism"
+import { useMatchMedia } from "~core/hooks/useMatchMedia"
 
 export const programmingLanguages = {
   javascript: ".js",
@@ -66,9 +69,18 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
       }, 2000)
     })
   }
+  const isDarkTheme = useMatchMedia("(prefers-color-scheme: dark)")
+  const editorTheme = useMemo(
+    () => (isDarkTheme ? oneDark : oneLight),
+    [isDarkTheme]
+  )
+
+  if (isDarkTheme === undefined) {
+    return null
+  }
 
   return (
-    <div className="codeblock relative font-sans text-[16px] group">
+    <div className={clsx("codeblock relative font-sans text-[16px] group")}>
       <div className="flex items-center justify-between py-1.5 px-4">
         <span className="text-xs lowercase">{language}</span>
 
@@ -83,7 +95,7 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
       </div>
       <SyntaxHighlighter
         language={language}
-        style={oneLight}
+        style={editorTheme}
         customStyle={{ margin: 0 }}>
         {value}
       </SyntaxHighlighter>

apps/web/src/core/components/GetExtensionButton.tsx

@@ -1,14 +1,16 @@
 import clsx from "clsx"
+import Link from "next/link"
 import { Button } from "~core/components/Button"
 import { EXTENSION_CHROME_URL } from "~core/components/common"
 
 export const GetExtensionButton = ({ className = "" }) => (
-  <Button
-    onClick={() => window.open(EXTENSION_CHROME_URL, "_blank")}
-    className={clsx(
-      "bg-indigo-9 hover:bg-indigo-10 text-white hover:text-white/80",
-      className
-    )}>
-    Get the extension
-  </Button>
+  <Link target="_blank" href={EXTENSION_CHROME_URL}>
+    <Button
+      className={clsx(
+        "bg-indigo-9 hover:bg-indigo-10 text-white hover:text-white/80",
+        className
+      )}>
+      Get the extension
+    </Button>
+  </Link>
 )

apps/web/src/core/components/Tooltip.tsx

@@ -6,8 +6,9 @@ export function Tooltip({
   content,
   above = false
 }: {
-  children: ReactNode
-  content: ReactNode
+  above?: boolean
+  children: React.ReactNode
+  content: React.ReactNode
 }) {
   const [visible, setVisible] = useState(false)
 
@@ -28,7 +29,8 @@ export function Tooltip({
       {visible && (
         <span
           className={clsx(
-            "absolute z-10 top-full left-0",
+            above ? "bottom-full" : "top-full",
+            "absolute z-10 left-0",
             "mt-2 p-3 w-52 bg-slate-9 text-slate-12 text-xs rounded-md shadow-lg"
           )}>
           {content}

apps/web/src/core/hooks/useMatchMedia.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react"
+
+export const useMatchMedia = (query: string) => {
+  const [isMatch, setIsMatch] = useState<boolean>()
+
+  useEffect(() => {
+    if (!globalThis.window?.matchMedia) {
+      return
+    }
+
+    // set initial value
+    const mediaWatcher = globalThis.window.matchMedia(query)
+    setIsMatch(mediaWatcher.matches)
+    //watch for updates
+    function onMediaChanged(e: MediaQueryListEvent) {
+      setIsMatch(e.matches)
+    }
+    mediaWatcher.addEventListener("change", onMediaChanged)
+
+    // clean up after ourselves
+    return function cleanup() {
+      mediaWatcher.removeEventListener("change", onMediaChanged)
+    }
+  }, [query])
+
+  return isMatch
+}

apps/web/src/features/agent/AgentHiringCard.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import type { TextareaHTMLAttributes } from "react"
 import { useState, type FC } from "react"
-import { useAgentManager } from "~core/providers/agent-manager"
+import { useAgentManager } from "~features/agent/agent-manager-provider"
 import { AgentMonitor } from "~features/agent/AgentMonitor"
 
 const Input: FC<TextareaHTMLAttributes<HTMLTextAreaElement>> = (props) => (

apps/web/src/features/agent/CaptainMonitor.tsx

@@ -1,4 +1,4 @@
-import { useAgentManager } from "~core/providers/agent-manager"
+import { useAgentManager } from "~features/agent/agent-manager-provider"
 import { AgentMonitor } from "~features/agent/AgentMonitor"
 
 export const CaptainMonitor = () => {

apps/web/src/core/providers/agent-manager.ts → apps/web/src/features/agent/agent-manager-provider.ts

@@ -1,7 +1,7 @@
 import { createProvider } from "puro"
 import { useCallback, useContext, useMemo, useState } from "react"
 import extractJson from "@airthium/extract-json-from-string"
-import { useWindowAI } from "~core/components/hooks/useWindowAI"
+import { useWindowAI } from "~core/hooks/useWindowAI"
 import { isMessageOutput } from "window.ai"
 
 import { nanoid } from "nanoid"

apps/web/src/features/agent/useCodeAI.ts

@@ -1,7 +1,7 @@
 import type { WebContainer } from "@webcontainer/api"
 import { posix } from "path"
-import { useWindowAI } from "~core/components/hooks/useWindowAI"
-import { parseCmd } from "~core/utils/terminal-parser"
+import { useWindowAI } from "~core/hooks/useWindowAI"
+import { parseCmd } from "~features/web-vm/terminal-parser"
 import { extractCodeBlocks } from "~features/agent/utils"
 
 const CONT_MESSAGE = "===CONTINUE_CODEAI==="

apps/web/src/features/agent/useCrew.ts

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react"
-import { useArrayRef } from "~core/components/hooks/useArrayRef"
-import { useWindowAI } from "~core/components/hooks/useWindowAI"
+import { useArrayRef } from "~core/hooks/useArrayRef"
+import { useWindowAI } from "~core/hooks/useWindowAI"
 import {
   useAgentManager,
   type AgentConfig
-} from "~core/providers/agent-manager"
+} from "~features/agent/agent-manager-provider"
 import { useLog } from "~features/agent/useLog"
 
 const getSystemPrompt = (goal: string, ac: AgentConfig) =>

apps/web/src/features/web-vm/WebPreview.tsx

@@ -1,4 +1,4 @@
-import { useWebVM } from "~core/providers/web-vm"
+import { useWebVM } from "~features/web-vm/web-vm-provider"
 
 import clsx from "clsx"
 

apps/web/src/features/web-vm/WebTerminal.tsx

@@ -1,4 +1,4 @@
-import { useWebVM } from "~core/providers/web-vm"
+import { useWebVM } from "~features/web-vm/web-vm-provider"
 
 import "xterm/css/xterm.css"
 

apps/web/src/core/providers/web-vm.ts → apps/web/src/features/web-vm/web-vm-provider.ts

@@ -4,8 +4,11 @@ import { type Terminal } from "xterm"
 
 import { WebContainer, type WebContainerProcess } from "@webcontainer/api"
 import type { FitAddon } from "xterm-addon-fit"
-import { useWindowAI } from "~core/components/hooks/useWindowAI"
-import { getInputBufferFromCursor, parseCmd } from "~core/utils/terminal-parser"
+import { useWindowAI } from "~core/hooks/useWindowAI"
+import {
+  getInputBufferFromCursor,
+  parseCmd
+} from "~features/web-vm/terminal-parser"
 import { useCodeAI } from "~features/agent/useCodeAI"
 import { binDirectory } from "~features/web-vm/files"
 import { posix } from "path"
@@ -94,7 +97,7 @@ const useWebVMProvider = ({
     [
       {
         role: "system",
-        content: `You are a powerful Linux quantum virtual machine that can simulate new command-line program, non-standard UNIX program, and anything above and beyond. If a program can be answered with just text, write just text. If a program is creating graphic, you will use ASCII art. If a program is creating audio, you will write music notations or lyrics. Be super creative and resourceful with how you come up with the output. You are not just any text-based program. Do not give any explanation, apologies, or any reasoning. Just output the result.`
+        content: `You are a powerful Linux quantum virtual machine that can create and output any command-line programs, non-standard UNIX programs, and anything above and beyond. If a program can be answered with just text, write just text. If a program is creating graphic, you will use ASCII art. If a program is creating audio, you will write music notations or lyrics. Be super creative and resourceful with how you come up with the output. You are not just any text-based program. Do not give any explanation, apologies, or any reasoning. Just output the result.`
       }
     ],
     {

apps/web/src/pages/agent.tsx

@@ -1,5 +1,5 @@
-import { AgentManagerProvider } from "~core/providers/agent-manager"
-import { WebVMProvider } from "~core/providers/web-vm"
+import { AgentManagerProvider } from "~features/agent/agent-manager-provider"
+import { WebVMProvider } from "~features/web-vm/web-vm-provider"
 import { AgentPlaygroundView } from "~views/AgentPlaygroundView"
 
 export default function AgentPlaygroundPage() {

apps/web/src/pages/index.tsx

@@ -45,10 +45,7 @@ function Home() {
         </Text>
 
         <div className="grid grid-cols-6 gap-6">
-          <Text className="md:col-span-4 col-span-6">
-            In this example, a simple chatbot is implemented in one file, with{" "}
-            <strong>no backend.</strong>
-            <br />
+          <Text className="text-zinc-9 md:col-span-4 col-span-6">
             Users, not developers, choose which model to use with apps{" "}
             <Link className="underline" href={GITHUB_URL} target="_blank">
               built on window.ai
@@ -64,7 +61,7 @@ function Home() {
       <Section>
         <div className="flex justify-between w-full md:space-x-4 md:flex-row flex-col space-y-8 md:space-y-0">
           <CodeBlock language="javascript" value={windowaiExample} />
-          <div className="w-full">
+          <div className="w-full h-screen md:h-auto">
             <Chat />
           </div>
         </div>

apps/web/src/pages/vm.tsx

@@ -1,5 +1,5 @@
 import Head from "next/head"
-import { WebVMProvider } from "~core/providers/web-vm"
+import { WebVMProvider } from "~features/web-vm/web-vm-provider"
 import { AIContainerView } from "~views/AIContainerView"
 
 export default function AIContainerPage() {

apps/web/src/views/AgentPlaygroundView.tsx

@@ -1,5 +1,5 @@
 import { InputMessage } from "~core/components/InputMessage"
-import { useAgentManager } from "~core/providers/agent-manager"
+import { useAgentManager } from "~features/agent/agent-manager-provider"
 import { AgentHiringCard } from "~features/agent/AgentHiringCard"
 import { CaptainMonitor } from "~features/agent/CaptainMonitor"
 import { CrewMonitor } from "~features/agent/CrewMonitor"