From b76819bd98b84675afbf4ac8e4c1e53e09f6e243 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Sat, 8 Apr 2023 10:42:31 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Add=20System=20message?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatWindow.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index e0ddb1f..098caa4 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import React, { useEffect, useRef } from "react";
 import { FaBrain, FaListAlt, FaPlayCircle, FaStar } from "react-icons/fa";
 import autoAnimate from "@formkit/auto-animate";
+import PopIn from "./motions/popin";
 
 interface ChatWindowProps {
   children?: ReactNode;
@@ -32,7 +33,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     >
       <MacWindowHeader />
       <div
-        className="mb-3 mr-3 h-[10em] overflow-y-auto sm-h:h-[15em] md-h:h-[20em] lg-h:h-[30em] "
+        className="mb-3 mr-3 h-[10em] overflow-y-auto overflow-x-hidden sm-h:h-[15em] md-h:h-[20em] lg-h:h-[30em] "
         ref={scrollRef}
       >
         {messages.map((message, index) => (
@@ -43,7 +44,15 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
         {messages.length != 0 ? (
           <ChatMessage message={{ type: "thinking", value: "" }} />
         ) : (
-          ""
+          <PopIn delay={1}>
+            <ChatMessage
+              message={{
+                type: "system",
+                value:
+                  "> Create an agent by adding a name / goal, and hitting deploy!",
+              }}
+            />
+          </PopIn>
         )}
       </div>
     </div>
@@ -99,7 +108,7 @@ const getMessagePrefix = (message: Message) => {
 };
 
 export interface Message {
-  type: "goal" | "thinking" | "task" | "action";
+  type: "goal" | "thinking" | "task" | "action" | "system";
   value: string;
 }