Merge pull request #140 from JacobBaqleh1/jacobbaqleh/feature-suggested-prompts

Feature - add suggested prompts

Author: JacobBaqleh1

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

@@ -1,30 +1,32 @@
-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("");
+    onChange({ target: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
     setIsLoading(true);
 
     // Add user message
@@ -44,7 +46,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 = "";
@@ -85,11 +87,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 +103,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">
@@ -92,11 +102,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

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

@@ -0,0 +1,33 @@
+interface SuggestedPromptsProps {
+  onPromptClick: (prompt: string) => void;
+}
+
+const prompts = [
+  "Do I qualify for a rental subsidy, such as Section 8/HomeForward?",
+  "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="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-4 border border-[#1f584f] rounded-4xl cursor-pointer py-1 font-medium sm:bg-white hover:bg-[#bac9b2]/50"
+            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);
+}