memoization and so on

Author: pablonyx

web/src/app/chat/ChatPage.tsx

@@ -158,25 +158,16 @@ export function ChatPage({
   // Useful for determining which session has been loaded (i.e. still on `new, empty session` or `previous session`)
   const loadedIdSessionRef = useRef<number | null>(existingChatSessionId);
 
-  // Assistants
-  const { visibleAssistants, hiddenAssistants: _ } = classifyAssistants(
-    user,
-    availableAssistants
-  );
-
-  const [finalAssistants, setFinalAssistants] = useState(visibleAssistants);
-
-  useEffect(() => {
-    const { visibleAssistants: updatedVisibleAssistants } = classifyAssistants(
+  // Assistants in order
+  const { finalAssistants } = useMemo(() => {
+    const { visibleAssistants, hiddenAssistants: _ } = classifyAssistants(
       user,
       availableAssistants
     );
-    setFinalAssistants(
-      user
-        ? orderAssistantsForUser(updatedVisibleAssistants, user)
-        : updatedVisibleAssistants
-    );
-    console.log(orderAssistantsForUser(updatedVisibleAssistants, user));
+    const finalAssistants = user
+      ? orderAssistantsForUser(visibleAssistants, user)
+      : visibleAssistants;
+    return { finalAssistants };
   }, [user, availableAssistants]);
 
   const existingChatSessionAssistantId = selectedChatSession?.persona_id;

web/src/app/chat/modal/configuration/AssistantsTab.tsx

@@ -44,25 +44,22 @@ export function AssistantsTab({
     })
   );
 
-  function handleDragEnd(event: DragEndEvent) {
+  async function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
 
     if (over && active.id !== over.id) {
-      setAssistants((items) => {
-        const oldIndex = items.findIndex(
-          (item) => item.id.toString() === active.id
-        );
-        const newIndex = items.findIndex(
-          (item) => item.id.toString() === over.id
-        );
-        const updatedAssistants = arrayMove(items, oldIndex, newIndex);
+      const oldIndex = assistants.findIndex(
+        (item) => item.id.toString() === active.id
+      );
+      const newIndex = assistants.findIndex(
+        (item) => item.id.toString() === over.id
+      );
+      const updatedAssistants = arrayMove(assistants, oldIndex, newIndex);
 
-        updateUserAssistantList(updatedAssistants.map((a) => a.id));
-
-        return updatedAssistants;
-      });
+      setAssistants(updatedAssistants);
+      await updateUserAssistantList(updatedAssistants.map((a) => a.id));
+      refreshUser();
     }
-    refreshUser();
   }
 
   return (