From 0599bb1d5e023a4fe319274ef07197c2cc4aa78b Mon Sep 17 00:00:00 2001
From: Lucas Janon <ljanon@gmail.com>
Date: Mon, 29 Jul 2024 21:39:17 -0300
Subject: [PATCH] Improve home

---
 src/components/Cmdk/components/Cmdk.tsx     |  9 ++++++---
 src/components/Cmdk/components/CmdkChat.tsx | 19 +++++++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Cmdk/components/Cmdk.tsx b/src/components/Cmdk/components/Cmdk.tsx
index b521e3bb..e0e2105c 100644
--- a/src/components/Cmdk/components/Cmdk.tsx
+++ b/src/components/Cmdk/components/Cmdk.tsx
@@ -292,7 +292,7 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
                 setIsCmdkOpen={setIsCmdkOpen}
               />
             )}
-            {activePage === "chat" && <CmdkChat />}
+            {activePage === "chat" && <CmdkChat initialValue={inputValue} setCmdkInputValue={setInputValue} />}
           </Command.List>
         </Command>
       </DialogContent>
@@ -318,6 +318,7 @@ function Home({
           onSelect={() => {
             goToChat();
           }}
+          value={inputValue}
         >
           <FeedbackIcon />
           Chat with the docs
@@ -341,7 +342,7 @@ function Home({
             router.push("/");
           }}
         >
-          <HomeIcon sx={{ strokeWidth: 0.2 }} />
+          <HomeIcon className="dark:text-grey-300" sx={{ strokeWidth: 0.2 }} />
           Go to "Home" section
         </Item>
         <Item
@@ -383,13 +384,15 @@ function Item({
   children,
   shortcut,
   onSelect = () => {},
+  value,
 }: {
   children: React.ReactNode;
   shortcut?: string;
   onSelect?: (value: string) => void;
+  value?: string;
 }) {
   return (
-    <Command.Item onSelect={onSelect}>
+    <Command.Item onSelect={onSelect} value={value} itemType="command">
       {children}
       {shortcut && (
         <div cmdk-zeta-shortcuts="">
diff --git a/src/components/Cmdk/components/CmdkChat.tsx b/src/components/Cmdk/components/CmdkChat.tsx
index f1702edd..a48f7632 100644
--- a/src/components/Cmdk/components/CmdkChat.tsx
+++ b/src/components/Cmdk/components/CmdkChat.tsx
@@ -3,7 +3,7 @@ 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 from "react";
+import React, { useEffect } from "react";
 
 const CustomTextField = styled(TextField)(({ theme }) => ({
   "& .MuiOutlinedInput-root": {
@@ -80,11 +80,18 @@ const AssistantMessage: React.FC<{ children: React.ReactNode; messageClasses?: s
   );
 };
 
-export const CmdkChat: React.FC<CmdkChatProps> = ({ ...props }) => {
+export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputValue }) => {
   const { messages, append, handleSubmit, input, handleInputChange, error, isLoading, setInput } = useChat({});
 
   const isLoadingAssistantMessage = isLoading;
 
+  useEffect(() => {
+    if (initialValue && input.length === 0) {
+      setInput(initialValue);
+      setCmdkInputValue("");
+    }
+  }, [initialValue, input]);
+
   return (
     <div className="w-full" onClick={(e) => e.stopPropagation()}>
       <div className={clsx("relative py-4")}>
@@ -140,7 +147,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ ...props }) => {
             <LoadingDots className="mb-1" />
           </AssistantMessage>
         )}
-        {messages.length === 0 && (
+        {messages.length === 0 && input.length === 0 && (
           <Command.Group className="w-full" heading="Example questions">
             {cmdkChatQuestions.map((question) => {
               const key = question.replace(/\s+/g, "_");
@@ -148,6 +155,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ ...props }) => {
               return (
                 <Command.Item
                   key={key}
+                  value={question}
                   className={clsx("cursor-pointer", "w-full")}
                   onSelect={() => {
                     append({ role: "user", content: question });
@@ -213,4 +221,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ ...props }) => {
   );
 };
 
-interface CmdkChatProps {}
+interface CmdkChatProps {
+  initialValue: string;
+  setCmdkInputValue: Function;
+}