Fixes: re-blink in converstaion, (refactor) prompts and validate LocalStorage prompts (#2181)

* chore(dependabot): add react-widget npm dependency updates

* refactor(prompts): init on load, mv to pref slice

* (refactor): searchable dropdowns are separate

* (fix/ui) prompts adjust

* feat(changelog): dancing stars

* (fix)conversation: re-blink bubble past stream

* (fix)endless GET sources, esling err

---------

Co-authored-by: GH Action - Upstream Sync <action@github.com>

frontend/src/hooks/useDataInitializer.ts

@@ -0,0 +1,111 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Doc } from '../models/misc';
+import {
+  getDocs,
+  getConversations,
+  getPrompts,
+} from '../preferences/preferenceApi';
+import {
+  selectConversations,
+  selectSelectedDocs,
+  selectToken,
+  setConversations,
+  setPrompts,
+  setSelectedDocs,
+  setSourceDocs,
+} from '../preferences/preferenceSlice';
+
+/**
+ * useDataInitializer Hook
+ *
+ * Custom hook responsible for initializing all application data on mount.
+ * This hook handles:
+ * - Fetching and setting up documents (source docs and selected docs)
+ * - Fetching and setting up prompts
+ * - Fetching and setting up conversations
+ *
+ * @param isAuthLoading -
+ */
+export default function useDataInitializer(isAuthLoading: boolean) {
+  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
+  const selectedDoc = useSelector(selectSelectedDocs);
+  const conversations = useSelector(selectConversations);
+
+  // Initialize documents
+  useEffect(() => {
+    // Skip if auth is still loading
+    if (isAuthLoading) {
+      return;
+    }
+
+    const fetchDocs = async () => {
+      try {
+        const data = await getDocs(token);
+        dispatch(setSourceDocs(data));
+
+        // Auto-select default document if none selected
+        if (
+          !selectedDoc ||
+          (Array.isArray(selectedDoc) && selectedDoc.length === 0)
+        ) {
+          if (Array.isArray(data)) {
+            data.forEach((doc: Doc) => {
+              if (doc.model && doc.name === 'default') {
+                dispatch(setSelectedDocs([doc]));
+              }
+            });
+          }
+        }
+      } catch (error) {
+        console.error('Failed to fetch documents:', error);
+      }
+    };
+
+    fetchDocs();
+  }, [isAuthLoading, token]);
+
+  // Initialize prompts
+  useEffect(() => {
+    // Skip if auth is still loading
+    if (isAuthLoading) {
+      return;
+    }
+
+    const fetchPromptsData = async () => {
+      try {
+        const data = await getPrompts(token);
+        dispatch(setPrompts(data));
+      } catch (error) {
+        console.error('Failed to fetch prompts:', error);
+      }
+    };
+
+    fetchPromptsData();
+  }, [isAuthLoading, token]);
+
+  // Initialize conversations
+  useEffect(() => {
+    // Skip if auth is still loading
+    if (isAuthLoading) {
+      return;
+    }
+
+    const fetchConversationsData = async () => {
+      if (!conversations?.data) {
+        dispatch(setConversations({ ...conversations, loading: true }));
+        try {
+          const fetchedConversations = await getConversations(token);
+          dispatch(setConversations(fetchedConversations));
+        } catch (error) {
+          console.error('Failed to fetch conversations:', error);
+          dispatch(setConversations({ data: null, loading: false }));
+        }
+      }
+    };
+
+    fetchConversationsData();
+  }, [isAuthLoading, conversations?.data, token]);
+}

frontend/src/hooks/useDefaultDocument.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { Doc } from '../models/misc';
-import { getDocs } from '../preferences/preferenceApi';
-import {
-  selectSelectedDocs,
-  selectToken,
-  setSelectedDocs,
-  setSourceDocs,
-} from '../preferences/preferenceSlice';
-
-export default function useDefaultDocument() {
-  const dispatch = useDispatch();
-  const token = useSelector(selectToken);
-  const selectedDoc = useSelector(selectSelectedDocs);
-
-  const fetchDocs = () => {
-    getDocs(token).then((data) => {
-      dispatch(setSourceDocs(data));
-      if (
-        !selectedDoc ||
-        (Array.isArray(selectedDoc) && selectedDoc.length === 0)
-      )
-        Array.isArray(data) &&
-          data?.forEach((doc: Doc) => {
-            if (doc.model && doc.name === 'default') {
-              dispatch(setSelectedDocs([doc]));
-            }
-          });
-    });
-  };
-
-  React.useEffect(() => {
-    fetchDocs();
-  }, []);
-}