add suggested prompts

Author: JacobBaqleh1

frontend/src/pages/Chat/components/InputField.tsx

@@ -1,30 +1,33 @@
-import { useState } from "react";
 import useMessages, { type IMessage } from "../../../hooks/useMessages";
 
 interface Props {
   setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>;
   isLoading: boolean;
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string;
   inputRef: React.RefObject<HTMLInputElement | null>;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export default function InputField({
   setMessages,
   isLoading,
   setIsLoading,
   inputRef,
+  value,
+  onChange,
 }: Props) {
-  const [text, setText] = useState("");
   const { addMessage } = useMessages();
 
   const handleSend = async () => {
-    if (!text.trim()) return;
+    if (!value.trim()) return;
 
-    const userMessage = text;
+    const userMessage = value;
     const userMessageId = Date.now().toString();
     const botMessageId = (Date.now() + 1).toString();
 
-    setText("");
+    // Clear the input in parent
+    onChange({ target: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
     setIsLoading(true);
 
     // Add user message
@@ -44,7 +47,7 @@ export default function InputField({
     ]);
 
     try {
-      const reader = await addMessage(text);
+      const reader = await addMessage(userMessage);
       if (!reader) return;
       const decoder = new TextDecoder();
       let fullText = "";
@@ -70,9 +73,9 @@ export default function InputField({
         prev.map((msg) =>
           msg.messageId === botMessageId
             ? {
-                ...msg,
-                content: "Sorry, I encountered an error. Please try again.",
-              }
+              ...msg,
+              content: "Sorry, I encountered an error. Please try again.",
+            }
             : msg,
         ),
       );
@@ -85,11 +88,11 @@ export default function InputField({
     <div className="flex gap-2 mt-4 h-11 items-stretch mx-auto max-w-[700px]">
       <input
         type="text"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
+        value={value}
+        onChange={onChange}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
-            e.preventDefault(); // prevent form submission or newline
+            e.preventDefault();
             handleSend();
           }
         }}
@@ -101,7 +104,7 @@ export default function InputField({
       <button
         className="px-6 bg-[#1F584F] hover:bg-[#4F8B82] text-white rounded-md cursor-pointer transition-color duration-300"
         onClick={handleSend}
-        disabled={isLoading || !text.trim()}
+        disabled={isLoading || !value.trim()}
       >
         {isLoading ? "..." : "Send"}
       </button>

frontend/src/pages/Chat/components/MessageWindow.tsx

@@ -5,6 +5,7 @@ import MessageContent from "./MessageContent";
 import useSession from "../../../hooks/useSession";
 import ExportMessagesButton from "./ExportMessagesButton";
 import CitySelectField from "./CitySelectField";
+import SuggestedPrompts from "./SuggestedPrompts";
 
 interface Props {
   messages: IMessage[];
@@ -22,6 +23,7 @@ export default function MessageWindow({
   onStatuteClick,
 }: Props) {
   const [isLoading, setIsLoading] = useState(false);
+  const [inputValue, setInputValue] = useState("");
   const { handleNewSession } = useSession();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const messagesRef = useRef<HTMLDivElement | null>(null);
@@ -44,6 +46,14 @@ export default function MessageWindow({
     }
   }, [messages]);
 
+  const handlePromptClick = (prompt: string) => {
+    setInputValue(prompt);
+    if (inputRef.current) {
+      inputRef.current.value = prompt;
+      inputRef.current.focus();
+    }
+  };
+
   return (
     <>
       <div className="flex-1">
@@ -53,28 +63,25 @@ export default function MessageWindow({
           </div>
         ) : (
           <div
-            className={`max-h-[calc(100dvh-240px)] sm:max-h-[calc(100dvh-20rem)] mx-auto max-w-[700px] ${
-              isOngoing ? "overflow-y-scroll" : "overflow-y-none"
-            }`}
+            className={`max-h-[calc(100dvh-240px)] sm:max-h-[calc(100dvh-20rem)] mx-auto max-w-[700px] ${isOngoing ? "overflow-y-scroll" : "overflow-y-none"
+              }`}
             ref={messagesRef}
           >
             {isOngoing ? (
               <div className="flex flex-col gap-4">
                 {messages.map((message) => (
                   <div
-                    className={`flex w-full ${
-                      message.role === "assistant"
-                        ? "justify-start"
-                        : "justify-end"
-                    }`}
+                    className={`flex w-full ${message.role === "assistant"
+                      ? "justify-start"
+                      : "justify-end"
+                      }`}
                     key={message.messageId}
                   >
                     <div
-                      className={`message-bubble p-3 rounded-2xl max-w-[95%] ${
-                        message.role === "assistant"
-                          ? "bg-slate-200 rounded-tl-sm"
-                          : "bg-[#1F584F] text-white rounded-tr-sm"
-                      }`}
+                      className={`message-bubble p-3 rounded-2xl max-w-[95%] ${message.role === "assistant"
+                        ? "bg-slate-200 rounded-tl-sm"
+                        : "bg-[#1F584F] text-white rounded-tr-sm"
+                        }`}
                     >
                       <MessageContent
                         message={message}
@@ -92,11 +99,16 @@ export default function MessageWindow({
       <div>
         {messages.length > 0 ? (
           <>
+            {messages.length === 1 && inputValue === "" && (
+              <SuggestedPrompts onPromptClick={handlePromptClick} />
+            )}
             <InputField
               setMessages={setMessages}
               isLoading={isLoading}
               setIsLoading={setIsLoading}
               inputRef={inputRef}
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
             />
             <div className="flex justify-center gap-4 mt-4">
               <button
@@ -112,7 +124,9 @@ export default function MessageWindow({
             </div>
           </>
         ) : (
-          <CitySelectField setMessages={setMessages} />
+          <>
+            <CitySelectField setMessages={setMessages} />
+          </>
         )}
       </div>
     </>

frontend/src/pages/Chat/components/SuggestedPrompts.tsx

@@ -0,0 +1,33 @@
+interface SuggestedPromptsProps {
+    onPromptClick: (prompt: string) => void;
+}
+
+const prompts = [
+    "Do I qualify for Section 8?",
+    "I have a leak in my roof. Help me address this with my landlord.",
+    "I received an eviction notice for non-payment of rent. What should I do?",
+    "I received a 'no-cause' eviction notice. How much money is my landlord required to pay me to move out?",
+];
+
+export default function SuggestedPrompts({ onPromptClick }: SuggestedPromptsProps) {
+    return (
+        <div className="xl:w-1/3 items-center m-auto ">
+            <div className=" flex flex-col gap-4 fade-in-up items-center ">
+                {prompts.map((prompt, idx) => (
+                    <button
+                        key={idx}
+                        className="inline-flex px-3 border border-[#1f584f] rounded-4xl cursor-pointer py-1 font-medium sm:bg-white hover:bg-[#bac9b2]  "
+                        onClick={() =>
+                            onPromptClick(
+                                Array.isArray(prompt) ? prompt.join(" ") : prompt
+                            )
+                        }
+                        type="button"
+                    >
+                        {prompt}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+}

frontend/src/style.css

@@ -39,3 +39,17 @@ body {
 .message-bubble a {
   @apply inline text-blue-600 underline cursor-pointer transition-colors hover:bg-blue-200 rounded;
 }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fade-in-up {
+  animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}