fix: filtering out empty answer prompts (#26)

Author: peppescg

src/components/Chat.tsx

@@ -33,16 +33,16 @@ export function Chat() {
               <ChatBubbleMessage variant="sent" className="bg-zinc-700">
                 <Markdown className="text-gray-300">
                   {sanitizeQuestionPrompt({
-                    question: question?.message,
-                    answer: answer?.message,
+                    question: question?.message ?? "",
+                    answer: answer?.message ?? "",
                   })}
                 </Markdown>
               </ChatBubbleMessage>
             </ChatBubble>
             <ChatBubble variant="received">
               <ChatBubbleAvatar fallback="AI" />
               <ChatBubbleMessage variant="received">
-                <Markdown>{answer?.message}</Markdown>
+                <Markdown>{answer?.message ?? ""}</Markdown>
               </ChatBubbleMessage>
             </ChatBubble>
           </div>

src/components/PromptList.tsx

@@ -26,18 +26,18 @@ export function PromptList({ prompts }: { prompts: Prompt[] }) {
                   to={`/prompt/${prompt.chat_id}`}
                   className={clsx(
                     `text-gray-800 text-sm truncate hover:text-gray-500`,
-                    { "font-bold": currentPromptId === prompt.chat_id }
+                    { "font-bold": currentPromptId === prompt.chat_id },
                   )}
                 >
                   {extractTitleFromMessage(
-                    prompt.question_answers?.[0].question.message
+                    prompt.question_answers?.[0].question?.message
                       ? sanitizeQuestionPrompt({
                           question:
                             prompt.question_answers?.[0].question.message,
                           answer:
                             prompt.question_answers?.[0]?.answer?.message ?? "",
                         })
-                      : `Prompt ${prompt.conversation_timestamp}`
+                      : `Prompt ${prompt.conversation_timestamp}`,
                   )}
                 </Link>
               </li>

src/hooks/useAlertsStore.ts

@@ -12,7 +12,13 @@ export const useAlertsStore = create<AlertState>((set, get) => ({
     set({ loading: true });
     const alerts = await getAlerts();
     set({
-      alerts: alerts.filter((alert) => alert.trigger_category === "critical"),
+      alerts: alerts
+        .filter((alert) => alert.trigger_category === "critical")
+        .filter((alert) =>
+          alert.conversation.question_answers.every(
+            (item) => item.answer && item.question,
+          ),
+        ),
       loading: false,
     });
     get().updateFilteredAlerts();
@@ -57,11 +63,11 @@ export const useAlertsStore = create<AlertState>((set, get) => ({
           })
           .sort(
             (a, b) =>
-              new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+              new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
           )
       : alerts.sort(
           (a, b) =>
-            new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+            new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
         );
 
     set({ filteredAlerts });

src/hooks/useBreadcrumb.ts

@@ -19,7 +19,7 @@ export function useBreadcrumb() {
   if (match?.path === "/prompt/") {
     try {
       const chat = prompts.find((prompt) => prompt.chat_id === currentPromptId);
-      const title = chat?.question_answers?.[0].question.message ?? "";
+      const title = chat?.question_answers?.[0].question?.message ?? "";
 
       const sanitized = sanitizeQuestionPrompt({
         question: title,

src/hooks/usePromptsStore.ts

@@ -10,6 +10,11 @@ export const usePromptsStore = create<PromptState>((set) => ({
   fetchPrompts: async () => {
     set({ loading: true });
     const prompts = await getPrompts();
-    set({ prompts, loading: false });
+    set({
+      prompts: prompts.filter((prompt) =>
+        prompt.question_answers?.every((item) => item.answer && item.question),
+      ),
+      loading: false,
+    });
   },
 }));

src/lib/utils.ts

@@ -53,22 +53,25 @@ export function groupPromptsByRelativeDate(prompts: Prompt[]) {
   const promptsSorted = prompts.sort(
     (a, b) =>
       new Date(b.conversation_timestamp).getTime() -
-      new Date(a.conversation_timestamp).getTime()
+      new Date(a.conversation_timestamp).getTime(),
   );
 
-  const grouped = promptsSorted.reduce((groups, prompt) => {
-    const promptDate = new Date(prompt.conversation_timestamp);
-    const now = new Date();
-    const differenceInMs = now.getTime() - promptDate.getTime();
-    const group = getGroup(differenceInMs, promptDate);
+  const grouped = promptsSorted.reduce(
+    (groups, prompt) => {
+      const promptDate = new Date(prompt.conversation_timestamp);
+      const now = new Date();
+      const differenceInMs = now.getTime() - promptDate.getTime();
+      const group = getGroup(differenceInMs, promptDate);
 
-    if (!groups[group]) {
-      groups[group] = [];
-    }
+      if (!groups[group]) {
+        groups[group] = [];
+      }
 
-    groups[group].push(prompt);
-    return groups;
-  }, {} as Record<string, Prompt[]>);
+      groups[group].push(prompt);
+      return groups;
+    },
+    {} as Record<string, Prompt[]>,
+  );
 
   return grouped;
 }
@@ -82,13 +85,13 @@ export function getAllIssues(alerts: Alert[]) {
       }
       return acc;
     },
-    {}
+    {},
   );
 
   const maxCount = Math.max(...Object.values(groupedTriggerCounts));
 
   const sortedTagCounts = Object.entries(groupedTriggerCounts).sort(
-    ([, countA], [, countB]) => countB - countA
+    ([, countA], [, countB]) => countB - countA,
   );
   return { maxCount, sortedTagCounts };
 }
@@ -120,22 +123,17 @@ export function sanitizeQuestionPrompt({
   answer: string;
 }) {
   try {
+    // it shouldn't be possible to receive the prompt answer without a question
+    if (!answer) return question;
+
     // Check if 'answer' is truthy; if so, try to find and return the text after "Query:"
-    if (answer) {
-      const index = question.indexOf("Query:");
-      if (index !== -1) {
-        // Return the substring starting right after the first occurrence of "Query:"
-        // Adding the length of "Query:" to the index to start after it
-        return question.substring(index + "Query:".length).trim();
-      } else {
-        // If there is no "Query:" in the string, log the condition and return an empty string
-        console.log("No 'Query:' found in the question.");
-        return "";
-      }
-    } else {
-      // If 'answer' is not provided or falsy, return the original question
-      return question;
+    const index = question.indexOf("Query:");
+    if (index !== -1) {
+      // Return the substring starting right after the first occurrence of "Query:"
+      // Adding the length of "Query:" to the index to start after it
+      return question.substring(index + "Query:".length).trim();
     }
+    return answer;
   } catch (error) {
     // Log the error and return the original question as a fallback
     console.error("Error processing the question:", error);

src/types.ts

@@ -68,10 +68,10 @@ export type Chat = {
     message: string;
     timestamp: string;
     message_id: string;
-  };
+  } | null;
   answer: {
     message: string;
     timestamp: string;
     message_id: string;
-  };
+  } | null;
 };