Merge pull request #242 from codeforpdx/issue-228/update-initial-form

[Enhancement] - Update Initial Form

Author: leekahung

Architecture.md

@@ -437,40 +437,59 @@ frontend/
 │   ├── PrivacyPolicy.tsx           # Privacy policy
 │   ├── main.tsx                    # Application entry point
 │   ├── style.css                   # Global styles
+│   ├── contexts/                   # React Contexts
+│   │   └── HousingContext.tsx      # Housing context for chat/letter generation
 │   ├── hooks/                      # Custom React hooks
 │   │   ├── useMessages.tsx         # Message handling logic
-│   │   ├── useSession.tsx          # Session management
+│   │   ├── useHousingContext.tsx   # Custom hook for housing context
 │   │   └── useLetterContent.tsx    # State management for letter generation
 │   ├── pages/Chat/                 # Chat page components
 │   │   ├── components/
-│   │   │   ├── CitySelectField.tsx # Location selection
+│   │   │   ├── ChatDisclaimer.tsx # Disclaimer for Chat page
+│   │   │   ├── InitializationForm.tsx # Context information from user
 │   │   │   ├── ExportMessagesButton.tsx # Chat export
 │   │   │   ├── InputField.tsx      # Message input
 │   │   │   ├── FeedbackModal.tsx   # Feedback modal
 │   │   │   ├── MessageContent.tsx  # Message display
 │   │   │   ├── MessageWindow.tsx   # Chat window
+│   │   │   ├── SelectField.tsx     # Initialization form select field
 │   │   │   └── SuggestedPrompts.tsx # Prompt suggestions
 │   │   └── utils/
 │   │       ├── exportHelper.ts     # Export functionality
 │   │       ├── feedbackHelper.tsx  # Feedback functionality
+│   │       ├── formHelper.tsx      # Housing context functionality
 │   │       └── streamHelper.tsx    # Stream functionality
+│   ├── pages/Letter/               # Letter page components
+│   │   ├── components/
+│   │   │   ├── LetterDisclaimer.tsx # Disclaimer for Letter page
+│   │   │   └── LetterGenerationDialog.tsx # Letter page dialog
+│   │   └── utils/
+│   │       └── letterHelper.tsx    # Letter generation functionality
 │   └── shared/                     # Shared components and utils
 │   │   ├── components/
 │   │   │   ├── BackLink.tsx        # Navigation component
 │   │   │   ├── BeaverIcon.tsx      # Oregon-themed icon
 │   │   │   ├── DisclaimerLayout.tsx  # Layout for disclaimer components
 │   │   │   ├── MessageContainer.tsx  # Layout for main UI component
 │   │   │   ├── Navbar.tsx            # Navigation
-│   │   │   └── TenatFirstAidLogo.tsx # Application logo
+│   │   │   └── TenantFirstAidLogo.tsx # Application logo
 │   │   ├── constants/
 │   │   │   └── constants.ts        # File of constants
 │   │   └── utils/
 │   │       └── dompurify.ts        # Helper function for sanitizing text
-│   └── tests/
-│   │   ├── components/
-│   │   │   └── Chat.test.tsx       # Chat component testing
-│   │   └── utils/
+│   └── tests/                     # Testing suite
+│   │   ├── components/            # Component testing
+│   │   │   ├── About.test.ts      # About component testing
+│   │   │   ├── Chat.test.tsx       # Chat component testing
+│   │   │   ├── ChatDisclaimer.test.ts # ChatDisclaimer component testing
+│   │   │   ├── HousingContext.test.ts # HousingContext component testing
+│   │   │   ├── InitializationForm.test.ts # InitializationForm component testing
+│   │   │   ├── Letter.test.ts      # Letter component testing
+│   │   │   ├── LetterDisclaimer.test.ts # LetterDisclaimer component testing
+│   │   │   ├── MessageWindow.test.ts # MessageWindow component testing
+│   │   └── utils/                  # Utility function testing
 │   │       ├── letterHelper.test.ts # letterHelper testing
+│   │       ├── formHelper.test.ts  # formHelper testing
 │   │       └── dompurify.test.ts   # dompurify testing
 ├── public/
 │   └── favicon.svg                 # Site favicon

backend/tenantfirstaid/chat.py

@@ -26,12 +26,47 @@
 https://oregon.public.law/statutes
 https://www.portland.gov/code/30/01
 https://eugene.municipal.codes/EC/8.425
-Include the links inline in your answer, with the attribute target="_blank" so that they open in a new tab, likethis:
+Include the links inline in your answer, with the attribute target="_blank" so that they open in a new tab, like this:
 <a href="https://oregon.public.law/statutes/ORS_90.427" target="_blank">ORS 90.427</a>.
 
 If the user asks questions about Section 8 or the HomeForward program, search the web for the correct answer and provide a link to the page you used, using the same format as above.
 
-If the user asks to make/generate/create/draft a letter, you should return a formatted letter after your conversational response. Add a delimiter -----generate letter----- to separate the two content. You can include <a>, <em>, and <strong> tags for additional formatting.
+If the user asks to make/generate/create/draft a letter, you should return a formatted letter after your conversational response. Add a delimiter -----generate letter----- to separate the two content. Place this formatted letter at the end of the response. You can include <a>, <em>, and <strong> tags for additional formatting. Proof-read the letter for accuracy in content and tone.
+
+You can use the following as the initial letter template:
+
+[Your Name]
+[Your Street Address]
+[Your City, State, Zip Code]
+[Date]
+
+<strong>Via First-Class Mail and/or Email</strong>
+
+[Landlord's Name or Property Management Company]
+[Landlord's or Property Manager's Street Address]
+[Landlord's or Property Manager's City, State, Zip Code]
+
+<strong>Re: Request for Repairs at [Your Street Address]</strong>
+
+Dear [Landlord's Name], I am writing to request immediate repairs for the property I rent at [Your Street Address]. I am making this request pursuant to my rights under the Oregon Residential Landlord and Tenant Act.
+
+As of [Date you first noticed the problem], I have observed the following issues that require your attention:
+
+• [Clearly describe the problem. For example: "The faucet in the kitchen sink constantly drips and will not turn off completely."]
+• [Continue to list problems, if any]
+
+These conditions are in violation of your duty to maintain the premises in a habitable condition as required by Oregon law, specifically ORS 90.320.
+
+I request that you begin making repairs to address these issues within [number of days] days. Please contact me at [Your Phone Number] or [Your Email Address] to schedule a time for the repairs to be made.
+
+I look forward to your prompt attention to this matter.
+
+Sincerely,
+
+[Your Name]
+
+
+If they provide details replace the issue in the template.
 """
 
 
@@ -40,11 +75,21 @@ def __init__(self):
         self.client = genai.Client(vertexai=True)
 
     def prepare_developer_instructions(self, city: str, state: str) -> str:
+        VALID_CITIES = {"Portland", "Eugene", "null", None}
+        VALID_STATES = {"OR"}
+
+        # Validate and sanitize inputs
+        city_clean = city.title() if city else "null"
+        state_upper = state.upper() if state else "OR"
+
+        if city_clean not in VALID_CITIES:
+            city_clean = "null"
+        if state_upper not in VALID_STATES:
+            raise ValueError(f"Invalid state: {state}")
+
         # Add city and state filters if they are set
         instructions = DEFAULT_INSTRUCTIONS
-        instructions += (
-            f"\nThe user is in {city if city != 'null' else ''} {state.upper()}.\n"
-        )
+        instructions += f"\nThe user is in {city_clean if city_clean != 'null' else ''} {state_upper}.\n"
         return instructions
 
     def generate_gemini_chat_response(

backend/tests/test_chat.py

@@ -27,7 +27,7 @@ def chat_manager(mocker):
 
 def test_prepare_developer_instructions_includes_city_state(chat_manager):
     city = "Portland"
-    state = "or"
+    state = "OR"
     instructions = chat_manager.prepare_developer_instructions(city, state)
     assert f"The user is in {city} {state.upper()}." in instructions
 

frontend/src/Chat.tsx

@@ -1,21 +1,16 @@
 import MessageWindow from "./pages/Chat/components/MessageWindow";
 import useMessages from "./hooks/useMessages";
-import useLocation from "./hooks/useLocation";
 import { useLetterContent } from "./hooks/useLetterContent";
 import ChatDisclaimer from "./pages/Chat/components/ChatDisclaimer";
 import MessageContainer from "./shared/components/MessageContainer";
 
 export default function Chat() {
   const { addMessage, messages, setMessages } = useMessages();
-  const { location, setLocation } = useLocation();
   const isOngoing = messages.length > 0;
   const { letterContent } = useLetterContent(messages);
 
   return (
-    // Chat layout is adjusted before and after session starts to account for CitySelectField
-    <div
-      className={`absolute ${isOngoing ? "top-16 md:top-32" : "top-1/2 -translate-y-1/2"} w-full flex items-center`}
-    >
+    <div className="flex pt-16 h-screen items-center justify-center">
       <div className="flex-1 h-full sm:h-auto items-center transition-all duration-300">
         <MessageContainer isOngoing={isOngoing} letterContent={letterContent}>
           <div
@@ -24,8 +19,6 @@ export default function Chat() {
             <MessageWindow
               messages={messages}
               addMessage={addMessage}
-              location={location}
-              setLocation={setLocation}
               setMessages={setMessages}
               isOngoing={isOngoing}
             />

frontend/src/Letter.tsx

@@ -1,6 +1,5 @@
 import MessageWindow from "./pages/Chat/components/MessageWindow";
 import useMessages from "./hooks/useMessages";
-import useLocation, { ILocation } from "./hooks/useLocation";
 import { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useLetterContent } from "./hooks/useLetterContent";
@@ -9,10 +8,12 @@ import LetterGenerationDialog from "./pages/Letter/components/LetterGenerationDi
 import { buildLetterUserMessage } from "./pages/Letter/utils/letterHelper";
 import LetterDisclaimer from "./pages/Letter/components/LetterDisclaimer";
 import MessageContainer from "./shared/components/MessageContainer";
+import useHousingContext from "./hooks/useHousingContext";
+import { buildChatUserMessage } from "./pages/Chat/utils/formHelper";
+import { ILocation } from "./contexts/HousingContext";
 
 export default function Letter() {
   const { addMessage, messages, setMessages } = useMessages();
-  const { location, setLocation } = useLocation();
   const isOngoing = messages.length > 0;
   const { letterContent } = useLetterContent(messages);
   const { org, loc } = useParams();
@@ -21,20 +22,35 @@ export default function Letter() {
   const [isLoading, setIsLoading] = useState(true);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const LOADING_DISPLAY_DELAY_MS = 1000;
+  const { housingLocation, housingType, tenantTopic, issueDescription } =
+    useHousingContext();
+  const { userMessage: initialUserMessage } = buildChatUserMessage(
+    housingLocation,
+    housingType,
+    tenantTopic,
+    issueDescription,
+  );
 
   useEffect(() => {
     const output = buildLetterUserMessage(org, loc);
     if (output === null) return;
+    const hasIssueContext = issueDescription !== "";
 
     const userMessageId = Date.now().toString();
     // Add user message
     setMessages((prev) => [
       ...prev,
-      { role: "user", content: output.userMessage, messageId: userMessageId },
+      {
+        role: "user",
+        content: [hasIssueContext ? initialUserMessage : "", output.userMessage]
+          .join(" ")
+          .trim(),
+        messageId: userMessageId,
+      },
     ]);
     streamLocationRef.current = output.selectedLocation;
     setStartStreaming(true);
-  }, [loc, org, setMessages]);
+  }, [loc, org, setMessages, issueDescription, initialUserMessage]);
 
   useEffect(() => {
     if (startStreaming === false || streamLocationRef.current === null) return;
@@ -46,7 +62,7 @@ export default function Letter() {
         const streamDone = await streamText({
           addMessage,
           setMessages,
-          location: streamLocationRef.current,
+          housingLocation: streamLocationRef.current,
         });
         const INITIAL_INSTRUCTION =
           "What was generated is just an initial template. Please include details of your specific housing situation to update the letter.";
@@ -96,7 +112,7 @@ export default function Letter() {
 
   return (
     <>
-      <div className="absolute top-16 md:top-32 w-full flex items-center">
+      <div className="flex pt-16 h-screen items-center justify-center">
         <LetterGenerationDialog ref={dialogRef} />
         <div className="flex-1 h-full sm:h-auto items-center transition-all duration-300">
           <MessageContainer isOngoing={isOngoing} letterContent={letterContent}>
@@ -111,8 +127,6 @@ export default function Letter() {
                 <MessageWindow
                   messages={messages}
                   addMessage={addMessage}
-                  location={location}
-                  setLocation={setLocation}
                   setMessages={setMessages}
                   isOngoing={isOngoing}
                 />

frontend/src/contexts/HousingContext.tsx

@@ -0,0 +1,96 @@
+import { createContext, useCallback, useMemo, useState } from "react";
+
+export interface ILocation {
+  city: string | null;
+  state: string | null;
+}
+
+export interface IHousingContextType {
+  housingLocation: ILocation;
+  city: string | null;
+  housingType: string | null;
+  tenantTopic: string | null;
+  issueDescription: string;
+  handleHousingLocation: ({ city, state }: ILocation) => void;
+  handleCityChange: (option: string | null) => void;
+  handleHousingChange: (option: string | null) => void;
+  handleTenantTopic: (option: string | null) => void;
+  handleIssueDescription: (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => void;
+}
+
+const HousingContext = createContext<IHousingContextType | null>(null);
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function HousingContextProvider({ children }: Props) {
+  const [city, setCity] = useState<string | null>(null);
+  const [housingLocation, setHousingLocation] = useState<ILocation>({
+    city: null,
+    state: null,
+  });
+  const [housingType, setHousingType] = useState<string | null>(null);
+  const [tenantTopic, setTenantTopic] = useState<string | null>(null);
+  const [issueDescription, setIssueDescription] = useState("");
+
+  const handleHousingLocation = useCallback(({ city, state }: ILocation) => {
+    setHousingLocation({ city, state });
+  }, []);
+
+  const handleCityChange = useCallback((option: string | null) => {
+    setCity(option);
+  }, []);
+
+  const handleHousingChange = useCallback((option: string | null) => {
+    setHousingType(option);
+  }, []);
+
+  const handleTenantTopic = useCallback((option: string | null) => {
+    setTenantTopic(option);
+  }, []);
+
+  const handleIssueDescription = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setIssueDescription(event.target.value);
+    },
+    [],
+  );
+
+  const housingContextObject = useMemo(
+    () => ({
+      housingLocation,
+      city,
+      housingType,
+      tenantTopic,
+      issueDescription,
+      handleHousingLocation,
+      handleCityChange,
+      handleHousingChange,
+      handleTenantTopic,
+      handleIssueDescription,
+    }),
+    [
+      housingLocation,
+      city,
+      housingType,
+      tenantTopic,
+      issueDescription,
+      handleHousingLocation,
+      handleCityChange,
+      handleHousingChange,
+      handleTenantTopic,
+      handleIssueDescription,
+    ],
+  );
+
+  return (
+    <HousingContext.Provider value={housingContextObject}>
+      {children}
+    </HousingContext.Provider>
+  );
+}
+
+export { HousingContext };

frontend/src/hooks/useHousingContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { HousingContext } from "../contexts/HousingContext";
+
+export default function useHousingContext() {
+  const context = useContext(HousingContext);
+  if (!context) {
+    throw new Error(
+      "useHousing can only be used within HousingContextProvider",
+    );
+  }
+  return context;
+}