Redesign (#1327)

docker-compose.yml

@@ -1,8 +1,8 @@
 version: '3.9'
 
 services:
-  next:
-    container_name: next
+  frontend:
+    container_name: frontend
     build:
       context: ./next
       dockerfile: Dockerfile
@@ -28,17 +28,17 @@ services:
       - next/.env
     environment:
       REWORKD_PLATFORM_HOST: 0.0.0.0
-      REWORKD_PLATFORM_DB_HOST: db
+      REWORKD_PLATFORM_DB_HOST: agentgpt_db
       REWORKD_PLATFORM_DB_PORT: "3307"
       REWORKD_PLATFORM_DB_USER: "reworkd_platform"
       REWORKD_PLATFORM_DB_PASS: "reworkd_platform"
       REWORKD_PLATFORM_DB_BASE: "reworkd_platform"
     depends_on:
-      - db
+      - agentgpt_db
 
-  db:
+  agentgpt_db:
     image: mysql:8.0
-    container_name: db
+    container_name: agentgpt_db
     restart: always
     build:
       context: ./db
@@ -51,23 +51,8 @@ services:
       MYSQL_ROOT_PASSWORD: "reworkd_platform"
       MYSQL_TCP_PORT: 3307
     volumes:
-      - db_data:/var/lib/mysql
+      - agentgpt_db:/var/lib/mysql
     command: [ 'mysqld', '--character-set-server=utf8mb4', '--collation-server=utf8mb4_unicode_ci' ]
 
-  weaviate:
-    image: semitechnologies/weaviate:1.19.6
-    restart: on-failure:0 # this should be 'no' or at least have ':1'
-    ports:
-      - "8080:8080"
-    environment:
-      QUERY_DEFAULTS_LIMIT: 25
-      AUTHENTICATION_ANONYMOUS_ACCESS_ENABLED: 'true'
-      PERSISTENCE_DATA_PATH: '/var/lib/weaviate'
-      DEFAULT_VECTORIZER_MODULE: 'none'
-      CLUSTER_HOSTNAME: 'node1'
-    volumes:
-      - weaviate:/var/lib/weaviate
-
 volumes:
-  weaviate:
-  db_data:
+  agentgpt_db:

next/entrypoint.sh

@@ -13,7 +13,7 @@ rm .env.temp
 source .env
 
 # Ensure DB is available before running Prisma commands
-./wait-for-db.sh db 3307
+./wait-for-db.sh agentgpt_db 3307
 
 # Run Prisma commands
 if [[ ! -f "/app/prisma/${DATABASE_URL:5}" ]]; then

next/package.json

@@ -38,9 +38,9 @@
     "axios": "^0.26.0",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^1.2.1",
+    "cobe": "^0.6.3",
     "cookies-next": "^2.1.2",
     "framer-motion": "^10.12.8",
-    "graphology": "^0.25.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
     "i18next": "^22.4.15",

next/src/components/AppTitle.tsx

@@ -1,26 +1,19 @@
-import { useTranslation } from "next-i18next";
 import React from "react";
 
-import Badge from "./Badge";
 import BannerBadge from "./BannerBadge";
-import PopIn from "./motions/popin";
 
 const AppTitle = () => {
-  const { i18n } = useTranslation();
-
   return (
-    <div id="title" className="relative flex flex-col items-center font-mono">
+    <div id="title" className="relative flex flex-col items-center">
       <div className="flex flex-row items-start">
-        <span className="text-4xl font-bold text-[#C0C0C0] xs:text-5xl sm:text-6xl">Agent</span>
-        <span className="text-4xl font-bold text-white xs:text-5xl sm:text-6xl">GPT</span>
-        <PopIn delay={0.5}>
-          <Badge colorClass="bg-gradient-to-t from-sky-500 to-sky-600 border-2 border-white/20 sm:absolute translate-y-2">
-            {i18n?.t("BETA", {
-              ns: "indexPage",
-            })}
-            &nbsp;🚀
-          </Badge>
-        </PopIn>
+        <span
+          className="text-4xl font-bold text-slate-12 xs:text-5xl sm:text-7xl"
+          style={{
+            textShadow: "0px 5px 5px rgba(0, 0, 0, 0.1)",
+          }}
+        >
+          AgentGPT
+        </span>
       </div>
       <div className="mt-3 text-center font-mono text-[0.7em] font-bold text-white">
         <div>
@@ -30,7 +23,7 @@ const AppTitle = () => {
               window.open("https://6h6bquxo5g1.typeform.com/to/qscfsOf1", "_blank");
             }}
           >
-            Apply to automate your business with Agents
+            Automate your business with Agents
           </BannerBadge>
         </div>
         <div

next/src/components/Button.tsx

@@ -3,7 +3,6 @@ import type { ForwardedRef } from "react";
 import React, { forwardRef, useState } from "react";
 
 import Loader from "./loader";
-import Ping from "./Ping";
 
 export interface ButtonProps {
   type?: "button" | "submit" | "reset";
@@ -35,16 +34,15 @@ const Button = forwardRef((props: ButtonProps, ref: ForwardedRef<HTMLButtonEleme
       type={props.type}
       disabled={loading || props.disabled}
       className={clsx(
-        "text-gray/50 relative rounded-lg border-2 border-white/30 px-4 py-1 font-bold transition-all sm:px-10 sm:py-3",
-        props.disabled && "cursor-not-allowed border-white/10 bg-zinc-900 text-white/30",
+        "relative rounded-lg border-2 border-black/20 px-4 py-1 font-bold text-white transition-all sm:px-10 sm:py-3",
+        props.disabled && "cursor-not-allowed border-white/10 bg-slate-9 text-white",
         props.disabled ||
-          "mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl",
+          "cursor-pointer bg-[#1E88E5]/70 text-white hover:bg-[#0084f7] hover:shadow-xl",
         props.disabled || props.enabledClassName,
         props.className
       )}
       onClick={onClick}
     >
-      {props.ping ? <Ping color="white" /> : <></>}
       <div className="relative">
         {loading && (
           <Loader className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform" />

next/src/components/Globe.tsx

@@ -0,0 +1,46 @@
+import type { COBEOptions } from "cobe";
+import createGlobe from "cobe";
+import type { MutableRefObject } from "react";
+import React, { useEffect, useRef } from "react";
+
+export default function Globe(): JSX.Element {
+  const canvasRef: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
+
+  const size = 700;
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    let phi = 0;
+
+    const globeSettings: COBEOptions = {
+      devicePixelRatio: 2,
+      width: size * 2,
+      height: size * 2,
+      phi: 0,
+      theta: 0,
+      dark: 0,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [1, 1, 1],
+      markerColor: [1, 1, 0],
+      glowColor: [0.757, 0.784, 0.804],
+      markers: [],
+      onRender: (state) => {
+        // Called on every animation frame.
+        // `state` will be an empty object, return updated params.
+        state.phi = phi;
+        phi += 0.001;
+      },
+    };
+
+    const globe = createGlobe(canvasRef.current, globeSettings);
+
+    return () => {
+      if (canvasRef.current && globe) {
+        globe.destroy();
+      }
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} style={{ width: size, height: size, aspectRatio: "1" }} />;
+}

next/src/components/Input.tsx

@@ -51,7 +51,7 @@ const Input = (props: InputProps) => {
     inputElement = (
       <textarea
         className={clsx(
-          "border:black delay-50 h-15 background-color-5 placeholder:text-color-tertiary text-color-primary border-color-2 border-focusVisible-1 border-hover-1 w-full resize-none rounded-xl border-2 p-2 text-sm tracking-wider outline-0 transition-all sm:h-20 md:text-lg",
+          "delay-50 h-15 w-full resize-none rounded-xl border-2 border-slate-7 bg-slate-1 p-2 text-sm tracking-wider text-slate-12 outline-none transition-all selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:h-20 md:text-lg",
           disabled && "cursor-not-allowed",
           left && "md:rounded-l-none",
           small && "text-sm sm:py-[0]"
@@ -68,7 +68,7 @@ const Input = (props: InputProps) => {
     inputElement = (
       <input
         className={clsx(
-          "background-color-5 placeholder:text-color-tertiary text-color-primary border-color-2 border-focusVisible-1 border-hover-1 w-full rounded-xl border-2 p-2 py-1 text-sm tracking-wider outline-0 transition-all duration-200 sm:py-3 md:text-lg",
+          "w-full rounded-xl border-2 border-slate-7 bg-slate-1 p-2 py-1 text-sm tracking-wider text-slate-12 outline-none transition-all duration-200 selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:py-3 md:text-lg",
           disabled && "cursor-not-allowed",
           left && "md:rounded-l-none",
           small && "text-sm sm:py-[0]"
@@ -86,7 +86,7 @@ const Input = (props: InputProps) => {
   }
 
   return (
-    <div className="items-left z-5 text-color-primary flex h-fit w-full flex-col rounded-xl font-mono text-lg md:flex-row md:items-center">
+    <div className="items-left z-5 flex h-fit w-full flex-col rounded-xl text-lg text-slate-12 md:flex-row md:items-center">
       {left && <Label left={left} type={type} toolTipProperties={toolTipProperties} />}
       {inputElement}
     </div>

next/src/components/Label.tsx

@@ -21,8 +21,8 @@ const Label = ({ type, left, toolTipProperties }: LabelProps) => {
         <div
           className={clsx(
             "center flex min-w-[8em] items-center rounded-xl md:border-2",
-            type !== "range" && "md:border-color-2 md:rounded-r-none md:border-r-0",
-            "md:background-color-5 text-color-secondary py-2 text-sm font-semibold tracking-wider transition-all md:py-3 md:pl-3 md:text-lg",
+            type !== "range" && "md:rounded-r-none md:border-r-0 md:border-slate-7",
+            "py-2 text-sm font-semibold tracking-wider text-slate-10 transition-all md:bg-slate-4 md:py-3 md:pl-3 md:text-lg",
             isTypeTextArea() && "md:h-20"
           )}
         >