Updates to model, and UI

backend/main.py

@@ -657,11 +657,11 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
     gen_pipe = pipeline(
         "text2text-generation",#"text-generation",#"text2text-generation",
         model=llm_model,
-        tokenizer=AutoTokenizer.from_pretrained(settings.llm_model),
+        tokenizer=AutoTokenizer.from_pretrained(settings.llm_model,use_fast= False),
         device=-1,              # force CPU
         max_new_tokens=256,
         do_sample=True,
-        temperature=0.5,
+        temperature=0.7,
     )
     # Wrap in LangChain's HuggingFacePipeline
     llm = HuggingFacePipeline(pipeline=gen_pipe)
@@ -715,7 +715,11 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
     fs = gcsfs.GCSFileSystem()
     with fs.open(settings.parquet_path, "rb") as f:
         df = pl.read_parquet(f)
-
+    
+    df = df.with_columns(
+        pl.col("id").cast(pl.Int64).alias("id")
+    )
+    
     # lowercase for filtering
     for col in ("title", "status", "legalBasis","fundingScheme"):
         df = df.with_columns(pl.col(col).str.to_lowercase().alias(f"_{col}_lc"))

frontend/src/components/ProjectDetails.tsx

@@ -97,7 +97,7 @@ export default function ProjectDetails({
     : [51.505, -0.09];
   
   // format date string to YYYY-MM-DD
-  const fmtDate = (iso?: string) => iso ? new Date(iso).toISOString().split('T')[0] : '-';
+  //const fmtDate = (iso?: string) => iso ? new Date(iso).toISOString().split('T')[0] : '-';
 
   // format numbers with two decimals
   const fmtNum = (num: number | null | undefined): string =>
@@ -125,11 +125,11 @@ export default function ProjectDetails({
             <Text fontWeight="bold">Acronym</Text>
             <Text>{project.acronym}</Text>
           </Box>
-          <Box><Text fontWeight="bold">Start Date</Text><Text>{fmtDate(project.startDate)}</Text></Box>
-          <Box><Text fontWeight="bold">End Date</Text><Text>{fmtDate(project.endDate)}</Text></Box>
+          <Box><Text fontWeight="bold">Start Date</Text><Text>{new Date(project.startDate).toISOString().slice(0,10)}</Text></Box>
+          <Box><Text fontWeight="bold">End Date</Text><Text>{new Date(project.endDate).toISOString().slice(0,10)}</Text></Box>
           <Box><Text fontWeight="bold">Funding (EC max)</Text><Text>€{fmtNum(project.ecMaxContribution)}</Text></Box>
           <Box><Text fontWeight="bold">Total Cost</Text><Text>€{fmtNum(project.totalCost)}</Text></Box>
-          <Box><Text fontWeight="bold">Funding Scheme</Text><Text>project.fundingScheme</Text></Box>
+          <Box><Text fontWeight="bold">Funding Scheme</Text><Text>{project.fundingScheme}</Text></Box>
           <Box>
             <Text fontWeight="bold">Legal Basis</Text>
             <Text>{project.legalBasis}</Text>

frontend/src/components/ProjectExplorer.tsx

@@ -63,6 +63,7 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
   setQuestion,
   chatHistory,
   askChatbot,
+  loading,
   messagesEndRef,
 }) => {
   const [filterOpts, setFilterOpts] = useState<FilterOptions>({
@@ -84,7 +85,7 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
     if (orgFilter)    params.set("organization", orgFilter);
     if (countryFilter) params.set("country", countryFilter);
     if (search)       params.set("search", search);
-    if (idFilter.length >= MIN_SEARCH_LEN) params.set("id", idFilter);
+    if (idFilter.length >= MIN_SEARCH_LEN) params.set("proj_id", idFilter);
     if (fundingSchemeFilter) params.set("fundingScheme", fundingSchemeFilter);
     params.set("sortField", sortField);
     params.set("sortOrder", sortOrder);
@@ -251,50 +252,74 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
 
       {/* Right Pane: Assistant */}
       <Box
-        w={{ base: "100%", md: "30%" }}
-        bg="gray.50"
-        p={4}
-        borderRadius="md"
-        height="500px"
-        display="flex"
-        flexDirection="column"
-      >
-        <Heading size="sm" mb={2}>
-          Assistant
-        </Heading>
-        <Text fontSize="xs" color="gray.500" mb={3}>
-          ⚠️ The model may occasionally produce incorrect or misleading answers.
-        </Text>
-        <Box flex={1} overflowY="auto" mb={4}>
-          <VStack spacing={3} align="stretch">
-            {chatHistory.map((msg: ChatMessage, i: number) => (
-              <HStack
-                key={i}
-                alignSelf={msg.role === "user" ? "flex-end" : "flex-start"}
-                maxW="90%"
-              >
-                {msg.role === "assistant" && <Avatar size="sm" name="Bot" />}
-                <Box>
-                  <Text fontSize="sm" bg={msg.role === "user" ? "blue.100" : "gray.200"} px={3} py={2} borderRadius="md">
-                    {msg.content}
-                  </Text>
-                </Box>
-                {msg.role === "user" && <Avatar size="sm" name="You" bg="blue.300" />}
-              </HStack>
-            ))}
-            <div ref={messagesEndRef} />
-          </VStack>
+          w={{ base: "100%", md: "30%" }}
+          bg="gray.50"
+          p={4}
+          borderRadius="md"
+          height="500px"
+          display="flex"
+          flexDirection="column"
+          mt={6}  // spacing from above
+        >
+          <Heading size="sm" mb={2}>Assistant</Heading>
+          <Text fontSize="xs" color="gray.500" mb={3}>
+            ⚠️ The model may occasionally produce incorrect or misleading answers.
+          </Text>
+          <Box flex={1} overflowY="auto" mb={4}>
+            <VStack spacing={3} align="stretch">
+              {chatHistory.map((msg, i) => (
+                <HStack
+                  key={i}
+                  alignSelf={msg.role === "user" ? "flex-end" : "flex-start"}
+                  maxW="90%"
+                >
+                  {msg.role === "assistant" && <Avatar size="sm" name="Bot" />}
+                  <Box>
+                    <Text
+                      fontSize="sm"
+                      bg={msg.role === "user" ? "blue.100" : "gray.200"}
+                      px={3}
+                      py={2}
+                      borderRadius="md"
+                    >
+                      {msg.content}
+                      {msg.content === "Generating answer..." && (
+                        <Spinner size="xs" ml={2} />
+                      )}
+                    </Text>
+                  </Box>
+                  {msg.role === "user" && (
+                    <Avatar size="sm" name="You" bg="blue.300" />
+                  )}
+                </HStack>
+              ))}
+              <div ref={messagesEndRef} />
+            </VStack>
+          </Box>
+          <HStack>
+            <Input
+              placeholder="Ask something..."
+              value={question}
+              onChange={(e) => setQuestion(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  askChatbot();
+                }
+              }}
+              isDisabled={loading}
+            />
+            <Button
+              onClick={askChatbot}
+              colorScheme="blue"
+              aria-label="Ask the chatbot"
+              isLoading={loading}
+              loadingText="Waiting..."
+            >
+              Send
+            </Button>
+          </HStack>
         </Box>
-        <HStack>
-          <Input
-            placeholder="Ask something..."
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); askChatbot(); } }}
-          />
-          <Button onClick={askChatbot} colorScheme="blue" aria-label="Ask the chatbot">Send</Button>
-        </HStack>
-      </Box>
     </Flex>
   );
 };

frontend/src/hooks/types.ts

@@ -101,8 +101,9 @@ export interface ProjectExplorerProps {
   setPage: React.Dispatch<React.SetStateAction<number>>;
   setSelectedProject: (project: Project) => void;
   question: string;
-  setQuestion: (value: string) => void;
+  setQuestion: (q: string) => void;
   chatHistory: ChatMessage[];
-  askChatbot: () => void;
+  askChatbot: () => Promise<void>;
+  loading: boolean;
   messagesEndRef: React.RefObject<HTMLDivElement>;
 }

frontend/src/hooks/useAppState.ts

@@ -38,6 +38,7 @@ export const useAppState = () => {
     });
 
   const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const [availableFilters, setAvailableFilters] = useState<AvailableFilters>({
     statuses: ["SIGNED", "CLOSED", "TERMINATED","UNKNOWN"],
@@ -49,7 +50,7 @@ export const useAppState = () => {
   const messagesEndRef = useRef<HTMLDivElement | null>(null);
 
   const fetchProjects = () => {
-    fetch(`/api/projects?page=${page}&search=${encodeURIComponent(search)}&status=${statusFilter}&legalBasis=${legalFilter}&organization=${orgFilter}&country=${countryFilter}&fundingScheme=${fundingSchemeFilter}&id=${idFilter}&sortField=${sortField}&sortOrder=${sortOrder}`)
+    fetch(`/api/projects?page=${page}&search=${encodeURIComponent(search)}&status=${statusFilter}&legalBasis=${legalFilter}&organization=${orgFilter}&country=${countryFilter}&fundingScheme=${fundingSchemeFilter}&proj_id=${idFilter}&sortField=${sortField}&sortOrder=${sortOrder}`)
       .then(res => res.json())
       .then((data: Project[]) => setProjects(data))
       .catch(console.error);
@@ -84,13 +85,20 @@ export const useAppState = () => {
   }
 
   const askChatbot = async () => {
-    if (!question.trim()) return;
+    if (!question.trim() || loading) return;          
     const newChat: ChatMessage[] = [
       ...chatHistory,
       { role: "user", content: question },
     ];
     setChatHistory(newChat);
     setQuestion("");
+    setLoading(true);                                      
+
+    // 1) placeholder
+    setChatHistory((h) => [
+      ...h,
+      { role: "assistant", content: "Generating answer..." },
+    ]);
 
     try {
       const res = await fetch("/api/rag", {
@@ -99,49 +107,42 @@ export const useAppState = () => {
         body: JSON.stringify({ query: question }),
       });
 
-      // Log the raw response for debugging
-      console.log("RAG API status:", res.status, res.statusText);
       const text = await res.text();
-      console.log("RAG API raw body:", text);
-
       if (!res.ok) {
-        // Try to parse JSON error, or fall back to raw text
-        let errDetail: string;
+        let errDetail = text;
         try {
-          const errJson = JSON.parse(text);
-          errDetail = errJson.detail || JSON.stringify(errJson);
-        } catch {
-          errDetail = text;
-        }
-        throw new Error(`API error ${res.status}: ${errDetail}`);
+          errDetail = JSON.parse(text).detail;
+        } catch {}
+        throw new Error(errDetail);
       }
 
-      // Now parse the successful JSON
       const data: RagResponse = JSON.parse(text);
-      console.log("RAG API parsed:", data);
-
       const idList = data.source_ids.join(", ") || "none";
       const assistantContent = `${data.answer}
 
-  The output was based on the following Project IDs: ${idList}`;
+The output was based on the following Project IDs: ${idList}`;
 
-      setChatHistory([
-        ...newChat,
+      // 2) replace placeholder with real answer
+      setChatHistory((h) => [
+        ...h.slice(0, -1),
         { role: "assistant", content: assistantContent },
       ]);
     } catch (err: any) {
-      console.error("askChatbot error:", err);
-      setChatHistory([
-        ...newChat,
+      // replace placeholder with error message
+      setChatHistory((h) => [
+        ...h.slice(0, -1),
         {
           role: "assistant",
           content: `Something went wrong: ${err.message}`,
         },
       ]);
+    } finally {
+      setLoading(false);
+      // scroll to bottom
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   };
 
-
   useEffect(fetchProjects, [page, search, statusFilter,legalFilter, orgFilter, countryFilter, fundingSchemeFilter, idFilter, sortField, sortOrder]);
   useEffect(() => {
     console.log("Updated filters:", filters);
@@ -185,6 +186,7 @@ export const useAppState = () => {
       chatHistory,
       setChatHistory,
       askChatbot,
+      loading,
       messagesEndRef
     },
     detailsProps: {
@@ -193,6 +195,7 @@ export const useAppState = () => {
       setQuestion,
       chatHistory,
       askChatbot,
+      loading,
       messagesEndRef
     }
   };