Further clean up in home page initial cards experience

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -136,10 +136,9 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
     }, [uploading]);
 
     useEffect(() => {
-        if (props.prefillMessage) {
-            setMessage(props.prefillMessage);
-            chatInputRef?.current?.focus();
-        }
+        if (props.prefillMessage === undefined) return;
+        setMessage(props.prefillMessage);
+        chatInputRef?.current?.focus();
     }, [props.prefillMessage]);
 
     useEffect(() => {

src/interface/web/app/components/suggestions/suggestionCard.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription } from "@/components/ui/card";
 
 import styles from "./suggestions.module.css";
 import { convertSuggestionTitleToIconClass } from "./suggestionsData";
-import { ArrowLeft, ArrowRight, MagicWand } from "@phosphor-icons/react";
+import { ArrowLeft, ArrowRight, MagicWand, XCircle } from "@phosphor-icons/react";
 
 interface StepOneSuggestionCardProps {
     title: string;
@@ -64,20 +64,20 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
 }
 
 export function StepOneSuggestionRevertCard(data: StepOneSuggestionRevertCardProps) {
-    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-fit cursor-pointer m-2 md:p-2 animate-fade-in-up border-none shadow-none`;
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-fit cursor-pointer m-2 md:p-1 animate-fade-in-up border-opacity-50 shadow-none`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     return (
         <Card className={cardClassName} onClick={data.onClick}>
-            <div className="flex w-full">
-                <CardContent className="m-0 p-2 w-full flex flex-row">
-                    <ArrowLeft className="w-6 h-6 text-muted-foreground inline-flex mr-1" />
+            <div className="flex w-full h-full items-center justify-center">
+                <CardContent className="m-0 p-2 w-full flex flex-row items-center justify-center">
                     {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
                     <CardDescription
-                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}
+                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full text-center`}
                     >
                         {data.body}
                     </CardDescription>
+                    <XCircle className="w-6 h-6 text-muted-foreground inline-flex ml-1" />
                 </CardContent>
             </div>
         </Card>

src/interface/web/app/components/suggestions/suggestionsData.ts

@@ -440,7 +440,7 @@ export const stepTwoSuggestion: { [key: string]: StepTwoSuggestion[] } = {
             prompt: "Find the main arguments in this document.",
         },
         {
-            prompt: "Explain the relevance of this document to the topic at hand.",
+            prompt: "Explain the relevance of this document to various other disciplines.",
         },
     ],
 };

src/interface/web/app/page.module.css

@@ -98,16 +98,24 @@ div.homeGreetings {
 
     div.chatBox {
         padding: 0;
-        height: 100vh;
+        height: 100%;
     }
 
     div.chatLayout {
         gap: 0;
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
+        display: flex;
+        height: 100%;
     }
 
     div.homeGreetings {
-        grid-template-rows: auto 1fr;
+        display: flex;
+        flex-direction: column;
+    }
+
+    div.inputBox {
+        margin-bottom: 0;
+        height: fit-content;
+        align-items: flex-end;
+        margin-top: auto;
     }
 }

src/interface/web/app/page.tsx

@@ -49,7 +49,6 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s
 import { AppSidebar } from "./components/appSidebar/appSidebar";
 import { Separator } from "@/components/ui/separator";
 import { KhojLogoType } from "./components/logo/khojLogo";
-import { Button } from "@/components/ui/button";
 
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
@@ -61,17 +60,9 @@ interface ChatBodyDataProps {
     isLoadingUserConfig: boolean;
 }
 
-function FisherYatesShuffle(array: any[]) {
-    for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-}
-
 function ChatBodyData(props: ChatBodyDataProps) {
     const [message, setMessage] = useState("");
-    const [prefilledMessage, setPrefilledMessage] = useState("");
+    const [prefillMessage, setPrefillMessage] = useState("");
     const [chatInputFocus, setChatInputFocus] = useState<ChatInputFocus>(ChatInputFocus.MESSAGE);
     const [images, setImages] = useState<string[]>([]);
     const [processingMessage, setProcessingMessage] = useState(false);
@@ -156,7 +147,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
         // generate colored icons for the available agents
         const agentIcons = agents.map((agent) => getIconFromIconName(agent.icon, agent.color)!);
         setAgentIcons(agentIcons);
-    }, [agentsData, props.isMobileWidth]);
+    }, [agentsData]);
 
     function showAllSuggestionsCards() {
         setStepOneSuggestionOptions(stepOneSuggestions);
@@ -204,7 +195,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
     }, []);
 
     function clickStepOneSuggestion(suggestion: StepOneSuggestion) {
-        setPrefilledMessage(suggestion.intent);
+        setPrefillMessage(suggestion.intent);
         const stepTwoSuggestions = getStepTwoSuggestions(suggestion.type);
         setSelectedStepOneSuggestion(suggestion);
         setStepTwoSuggestionOptions(stepTwoSuggestions);
@@ -308,7 +299,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     >
                         <ChatInputArea
                             isLoggedIn={props.isLoggedIn}
-                            prefillMessage={prefilledMessage}
+                            prefillMessage={prefillMessage}
                             focus={chatInputFocus}
                             sendMessage={(message) => setMessage(message)}
                             sendImage={(image) => setImages((prevImages) => [...prevImages, image])}
@@ -367,10 +358,10 @@ function ChatBodyData(props: ChatBodyDataProps) {
                         body={selectedStepOneSuggestion.actionTagline}
                         color={selectedStepOneSuggestion.color}
                         onClick={() => {
+                            setPrefillMessage("");
                             setSelectedStepOneSuggestion(null);
                             setStepTwoSuggestionOptions([]);
                             setChatInputFocus(ChatInputFocus.MESSAGE);
-                            setPrefilledMessage("");
                         }}
                     />
                 )}