Merge pull request #681 from polywrap/release/staging

Release Jan 3rd

apps/browser/app/layout.tsx

@@ -9,8 +9,13 @@ import "react-toastify/dist/ReactToastify.css";
 import SidebarLayout from "@/components/SidebarLayout";
 import { Providers } from "@/components/providers/Providers";
 import { cookies } from "next/headers";
+import { Metadata } from "next";
 config.autoAddCss = false;
 
+export const metadata: Metadata = {
+  title: "evo.ninja"
+}
+
 export default function EvoApp({ children }: { children: React.ReactNode }) {
   const currentDevice = cookies().get("X-User-Device");
   return (

apps/browser/app/page.tsx

@@ -26,8 +26,10 @@ import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { v4 as uuid } from "uuid";
 import { InMemoryFile } from "@nerfzael/memory-fs";
+import { useSupabaseClient } from "@/lib/supabase/useSupabaseClient";
 
 function Dojo({ params }: { params: { id?: string } }) {
+  const supabase = useSupabaseClient();
   const [evoService, setEvoService] = useAtom(evoServiceAtom);
   const [newGoalSubmitted, setNewGoalSubmitted] = useAtom(newGoalSubmittedAtom);
   const [isChatLoading, setIsChatLoading] = useAtom(isChatLoadingAtom);
@@ -43,13 +45,14 @@ function Dojo({ params }: { params: { id?: string } }) {
   const { data: chats, isLoading: isChatsLoading } = useChats();
   const router = useRouter();
   const { status: sessionStatus, data: sessionData } = useSession();
-  const isAuthenticated = sessionStatus === "authenticated";
+  const isAuthenticated = sessionStatus === "authenticated" && !!supabase;
 
   const { mutateAsync: createChat } = useCreateChat();
   const { mutateAsync: updateChatTitle } = useUpdateChatTitle();
   const { logs, isConnected, isStarting, isRunning, handleStart, status } = useEvoService(
     chatId,
     isAuthenticated,
+    supabase
   );
 
   const workspaceUploadUpdate = useWorkspaceUploadUpdate();

apps/browser/components/ChatLogs.tsx

@@ -25,7 +25,7 @@ export default function ChatLogs({
   logs,
   isRunning,
   status,
-  chatName
+  chatName,
 }: ChatLogsProps) {
   const listContainerRef = useRef<HTMLDivElement | null>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -189,6 +189,7 @@ export default function ChatLogs({
         isOpen={logsDetails.open}
         onClose={() => setLogsDetails({ ...logsDetails, open: false })}
         logs={sanitizedLogs[logsDetails.index]}
+        status={status}
       />
     </>
   );

apps/browser/components/Sidebar.tsx

@@ -326,24 +326,30 @@ const Sidebar = ({
                 <div className="h-12 w-full animate-pulse rounded-lg bg-zinc-700" />
               )}
               <div className="flex items-center space-x-1 text-lg text-white">
-                <a
-                  href="https://discord.gg/r3rwh69cCa"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <Button
+                  variant="icon"
+                  onClick={() => {
+                    window.open(
+                      "https://discord.gg/r3rwh69cCa",
+                      "_blank",
+                      "noopener noreferrer"
+                    );
+                  }}
                 >
-                  <Button variant="icon">
-                    <DiscordLogo size={20} />
-                  </Button>
-                </a>
-                <a
-                  href="https://github.com/polywrap/evo.ninja"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                  <DiscordLogo size={20} />
+                </Button>
+                <Button
+                  variant="icon"
+                  onClick={() => {
+                    window.open(
+                      "https://github.com/polywrap/evo.ninja",
+                      "_blank",
+                      "noopener noreferrer"
+                    );
+                  }}
                 >
-                  <Button variant="icon">
-                    <GithubLogo size={20} />
-                  </Button>
-                </a>
+                  <GithubLogo size={20} />
+                </Button>
               </div>
             </div>
           </div>

apps/browser/components/modals/ChatDetails.tsx

@@ -1,22 +1,26 @@
-import { useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import Modal from "./ModalBase";
 import ReactMarkdown from "react-markdown";
-import { CaretUp } from "@phosphor-icons/react";
+import { CaretUp, CheckCircle } from "@phosphor-icons/react";
 import { MessageSet } from "@/lib/utils/sanitizeLogsDetails";
 import clsx from "clsx";
+import LoadingCircle from "../LoadingCircle";
 
 interface ChatDetailsProps {
   isOpen: boolean;
   onClose: () => void;
   logs: MessageSet;
+  status?: string;
 }
 
 export default function ChatDetails({
   isOpen,
   onClose,
   logs,
+  status,
 }: ChatDetailsProps) {
   const [expandedStep, setExpandedStep] = useState<string | null>(null);
+  const [initialToggle, setInitialToggle] = useState<boolean>(false);
   const contentRefs = useRef<{ [index: number]: HTMLDivElement | null }>({});
 
   const toggleStep = (step: string, index: number) => {
@@ -38,61 +42,100 @@ export default function ChatDetails({
     }
   };
 
+  useLayoutEffect(() => {
+    if (!initialToggle && isOpen) {
+      const logs_index = Object.keys(logs.details).length - 1;
+      const stepTitle = Object.keys(logs.details)[logs_index];
+      const stepDetails = Object.values(logs.details)[logs_index];
+      if (contentRefs.current[logs_index] && stepDetails.length > 0) {
+        toggleStep(stepTitle, logs_index);
+        setInitialToggle(true);
+      }
+    }
+  }, [isOpen, logs.details]);
+
   return (
     <Modal
       isOpen={isOpen}
       onClose={() => {
+        setInitialToggle(false);
         setExpandedStep(null);
         onClose();
       }}
+      autoScroll
       title="Details"
+      panelStyles={{ maxWidth: "max-w-screen-md" }}
     >
-      <div className="space-y-4">
+      <div className="space-y-2 md:space-y-2">
         {logs &&
           Object.entries(logs.details).map(
-            ([stepTitle, stepDetails], index) => (
-              <div
-                key={stepTitle}
-                className={clsx(
-                  "prose-condensed prose prose-zinc prose-invert rounded-md bg-zinc-800 shadow-md transition-colors duration-0 ease-in-out hover:shadow-lg",
-                  {
-                    "cursor-pointer duration-150 hover:bg-zinc-700":
-                      expandedStep !== stepTitle,
-                  }
-                )}
-              >
-                <button
-                  onClick={() => toggleStep(stepTitle, index)}
-                  className="group flex w-full items-center justify-between p-4"
-                >
-                  <ReactMarkdown>{stepTitle}</ReactMarkdown>
-                  {stepDetails.length > 0 && (
-                    <CaretUp
-                      weight="bold"
-                      size={14}
+            ([stepTitle, stepDetails], index) => {
+              const isGoal = stepTitle.includes("## Goal");
+              return (
+                <div key={stepTitle} className="space-y-2 md:space-y-4">
+                  <div
+                    className={clsx(
+                      "prose-condensed prose prose-zinc prose-invert relative max-w-none rounded-md bg-zinc-800 shadow-md transition-colors duration-0 ease-in-out hover:shadow-lg",
+                      {
+                        "cursor-pointer duration-150 hover:bg-zinc-700":
+                          expandedStep !== stepTitle && stepDetails.length > 0,
+                      }
+                    )}
+                  >
+                    <button
+                      onClick={() => toggleStep(stepTitle, index)}
+                      className={clsx(
+                        "group flex w-full items-center justify-between p-4",
+                        { "cursor-default": stepDetails.length <= 0 },
+                        {
+                          "rounded-md border border-green-500 bg-green-900 text-green-400":
+                            isGoal,
+                        }
+                      )}
+                    >
+                      <div className="flex items-center space-x-2">
+                        {isGoal && <CheckCircle size={24} weight="bold" />}
+                        <ReactMarkdown className="prose-headings:mt-0 prose-headings:text-lg prose-headings:text-inherit">
+                          {stepTitle}
+                        </ReactMarkdown>
+                      </div>
+                      {stepDetails.length > 0 && (
+                        <CaretUp
+                          weight="bold"
+                          size={14}
+                          className={clsx(
+                            "transform text-white transition-transform duration-500 ease-in-out group-hover:text-cyan-500",
+                            expandedStep !== stepTitle && "rotate-180"
+                          )}
+                        />
+                      )}
+                    </button>
+                    <div
+                      ref={(el) => {
+                        contentRefs.current[index] = el;
+                      }}
                       className={clsx(
-                        "transform text-white transition-transform duration-500 ease-in-out group-hover:text-cyan-500",
-                        expandedStep !== stepTitle && "rotate-180"
+                        "step h-0 overflow-hidden transition-[height] duration-500 ease-in-out"
                       )}
-                    />
-                  )}
-                </button>
-                <div
-                  ref={(el) => {
-                    contentRefs.current[index] = el;
-                  }}
-                  className={clsx(
-                    "step h-0 overflow-hidden transition-[height] duration-500 ease-in-out"
-                  )}
-                >
-                  {stepDetails.map((detail, detailIndex) => (
-                    <div className="p-4 pt-0" key={detailIndex}>
-                      <ReactMarkdown>{detail}</ReactMarkdown>
+                    >
+                      {stepDetails.map((detail, detailIndex) => (
+                        <div className="px-4 pt-0" key={detailIndex}>
+                          <ReactMarkdown>{detail}</ReactMarkdown>
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  </div>
+                  {status &&
+                    Object.keys(logs.details).length - 1 === index &&
+                    !isGoal && (
+                      <div className="flex items-center space-x-2 text-cyan-500">
+                        <LoadingCircle />
+                        <div>{status}</div>
+                      </div>
+                    )}
                 </div>
-              </div>
-            )
+              );
+            }
           )}
       </div>
     </Modal>

apps/browser/components/modals/FileModal.tsx

@@ -33,10 +33,10 @@ export default function FileModal(props: FileModalProps) {
         title={file?.path ?? "View File"}
         onClose={onClose}
         contentStyles={{ padding: "p-0" }}
-        panelStyles={{ maxWidth: "max-w-[700px]" }}
+        panelStyles={{ maxWidth: "max-w-screen-md" }}
       >
         {file?.content && (
-          <div className="prose-file prose prose-invert w-full max-w-none overflow-auto p-8 pr-[1.5rem] font-mono text-xs [scrollbar-gutter:stable]">
+          <div className="prose prose-invert w-full max-w-none overflow-auto p-8 pr-[1.5rem] font-mono text-xs [scrollbar-gutter:stable]">
             {formattedContent}
           </div>
         )}