From 18347953f88b39dbb891b77f17e5419e3a92e3d9 Mon Sep 17 00:00:00 2001
From: Lucas Janon <ljanon@gmail.com>
Date: Tue, 30 Jul 2024 14:45:04 -0300
Subject: [PATCH] UI/UX improvements & cleanup

---
 src/components/Cmdk/components/Cmdk.tsx     |  5 +-
 src/components/Cmdk/components/CmdkChat.tsx | 88 +++++----------------
 2 files changed, 24 insertions(+), 69 deletions(-)

diff --git a/src/components/Cmdk/components/Cmdk.tsx b/src/components/Cmdk/components/Cmdk.tsx
index e0e2105c..71d01b2c 100644
--- a/src/components/Cmdk/components/Cmdk.tsx
+++ b/src/components/Cmdk/components/Cmdk.tsx
@@ -176,6 +176,7 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
   const isHome = activePage === "home";
 
   const onValueChange = React.useCallback((value: string) => {
+    console.log(value);
     setInputValue(value);
   }, []);
 
@@ -238,6 +239,7 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
               popPage();
             }
           }}
+          shouldFilter={false}
         >
           {activePage === "chat" && (
             <div className="py-3 px-1">
@@ -318,7 +320,6 @@ function Home({
           onSelect={() => {
             goToChat();
           }}
-          value={inputValue}
         >
           <FeedbackIcon />
           Chat with the docs
@@ -342,7 +343,7 @@ function Home({
             router.push("/");
           }}
         >
-          <HomeIcon className="dark:text-grey-300" sx={{ strokeWidth: 0.2 }} />
+          <HomeIcon className="text-grey-400 dark:text-grey-300" sx={{ strokeWidth: 0.2 }} />
           Go to "Home" section
         </Item>
         <Item
diff --git a/src/components/Cmdk/components/CmdkChat.tsx b/src/components/Cmdk/components/CmdkChat.tsx
index a48f7632..22f19e67 100644
--- a/src/components/Cmdk/components/CmdkChat.tsx
+++ b/src/components/Cmdk/components/CmdkChat.tsx
@@ -1,77 +1,20 @@
-import styled from "@emotion/styled";
-import { TextField } from "@mui/material";
-import twTheme from "@zetachain/ui-toolkit/theme/tailwind.theme.json";
 import { useChat } from "ai/react";
 import clsx from "clsx";
-import React, { useEffect } from "react";
-
-const CustomTextField = styled(TextField)(({ theme }) => ({
-  "& .MuiOutlinedInput-root": {
-    fieldset: {
-      borderColor: `${twTheme.colors.green[900]}`,
-    },
-    "&:not(.Mui-disabled):hover fieldset": {
-      borderColor: `${twTheme.colors.green[600]} !important`,
-    },
-    "&.Mui-disabled fieldset": {
-      borderColor: twTheme.colors.grey[700],
-    },
-  },
-}));
-
 import { Command } from "cmdk";
+import React, { useEffect, useRef } from "react";
 
 import { cmdkChatQuestions } from "../cmdk.constants";
 import { ArrowUpIcon } from "./ArrowUpIcon";
 import { LoadingDots } from "./LoadingDots";
 import { MarkdownMessage } from "./MarkdownMesage";
 
-export enum MessageRole {
-  User = "user",
-  Assistant = "assistant",
-}
-
-export enum MessageStatus {
-  Pending = "pending",
-  InProgress = "in-progress",
-  Complete = "complete",
-}
-
-export interface Message {
-  role: MessageRole;
-  content: string;
-  status: MessageStatus;
-}
-
-interface NewMessageAction {
-  type: "new";
-  message: Message;
-}
-
-interface UpdateMessageAction {
-  type: "update";
-  index: number;
-  message: Partial<Message>;
-}
-
-interface AppendContentAction {
-  type: "append-content";
-  index: number;
-  content: string;
-}
-
-interface ResetAction {
-  type: "reset";
-}
-
-type MessageAction = NewMessageAction | UpdateMessageAction | AppendContentAction | ResetAction;
-
-const AssistantMessage: React.FC<{ children: React.ReactNode; messageClasses?: string }> = ({
+const AssistantMessage: React.FC<{ children: React.ReactNode; className?: string; messageClasses?: string }> = ({
   children,
+  className,
   messageClasses,
 }) => {
   return (
-    <div className="flex px-4 mb-4 overflow-hidden">
+    <div className={clsx("flex px-4 mb-4 overflow-hidden", className)}>
       <div className="min-w-[32px] mb-[1px] mt-[1px] mr-4 w-8 h-8 rounded-full flex items-center justify-center bg-green-100">
         <img src="/img/logos/zeta.svg" height="14" width="14" />
       </div>
@@ -81,10 +24,15 @@ const AssistantMessage: React.FC<{ children: React.ReactNode; messageClasses?: s
 };
 
 export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputValue }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const { messages, append, handleSubmit, input, handleInputChange, error, isLoading, setInput } = useChat({});
 
   const isLoadingAssistantMessage = isLoading;
 
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+
   useEffect(() => {
     if (initialValue && input.length === 0) {
       setInput(initialValue);
@@ -107,7 +55,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
         {!error &&
           messages.map((message, index) => {
             switch (message.role) {
-              case MessageRole.User:
+              case "user":
                 return (
                   <div key={index} className="flex gap-4 mx-4 mb-4 justify-end">
                     <div
@@ -123,9 +71,13 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
                     </div>
                   </div>
                 );
-              case MessageRole.Assistant:
+              case "assistant":
                 return (
-                  <AssistantMessage messageClasses={message.content.length < 60 ? "flex items-center mb-4" : "mb-4"}>
+                  <AssistantMessage
+                    key={index}
+                    className={clsx(index === messages.length - 1 && "mb-8")}
+                    messageClasses={message.content.length < 90 ? "flex items-center" : undefined}
+                  >
                     <MarkdownMessage message={message} />
                   </AssistantMessage>
                 );
@@ -143,11 +95,11 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
           })}
 
         {isLoadingAssistantMessage && Boolean(messages.length) && messages[messages.length - 1]?.role === "user" && (
-          <AssistantMessage messageClasses="flex">
+          <AssistantMessage className="mb-8" messageClasses="flex">
             <LoadingDots className="mb-1" />
           </AssistantMessage>
         )}
-        {messages.length === 0 && input.length === 0 && (
+        {messages.length === 0 && (
           <Command.Group className="w-full" heading="Example questions">
             {cmdkChatQuestions.map((question) => {
               const key = question.replace(/\s+/g, "_");
@@ -172,6 +124,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
       <div className="absolute bottom-0 pb-4 w-[98%] bg-background py-3 pt-0 bg-white dark:bg-[#15191e] flex items-center justify-center">
         <div className="flex items-center border rounded-full shadow-sm w-[95%] justify-center">
           <input
+            ref={inputRef}
             type="text"
             placeholder={isLoading ? "Waiting on an answer..." : "What can ZetaAI do for you?"}
             className="flex-1 px-4 py-1 bg-[transparent] text-gray-600 border-none rounded-full focus:outline-none"
@@ -194,7 +147,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
                   if (isLoading) {
                     return;
                   }
-                  handleSubmit(e as any);
+                  handleSubmit(e);
                   return;
                 case "Backspace":
                   e.stopPropagation();
@@ -212,6 +165,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
                 "dark:bg-grey-600 bg-grey-200": input.length === 0,
               }
             )}
+            onClick={handleSubmit}
           >
             <ArrowUpIcon enabled={input.length > 0} className="w-2 h-2" />
           </button>