tests scrolling to top, show/hide templates

src/components/Conversations/Conversation.jsx

@@ -1,19 +1,18 @@
 import React, { useState, useRef } from 'react';
 import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setText } from '~/store/textSlice';
 import manualSWR from '~/utils/fetchers';
 import ConvoIcon from '../svg/ConvoIcon';
 
-export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
+export default function Conversation({ id, parentMessageId, conversationId, title = 'New conversation' }) {
   const [renaming, setRenaming] = useState(false);
   const [titleInput, setTitleInput] = useState(title);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
-  const { conversationId } = useSelector((state) => state.convo);
   const { trigger, isMutating } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
   const rename = manualSWR(`http://localhost:3050/update_convo`, 'post');
 
@@ -72,7 +71,7 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
       {...aProps}
     >
       <ConvoIcon />
-      <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
+      <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all" >
         {renaming === true ? (
           <input
             ref={inputRef}

src/components/Conversations/index.jsx

@@ -1,10 +1,25 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Conversation from './Conversation';
 
 export default function Conversations({ conversations }) {
+  const { conversationId } = useSelector((state) => state.convo);
+  // const currentRef = useRef(null);
+
+  // const scrollToTop = () => {
+  //   currentRef.current?.scrollIntoView({ behavior: 'smooth' });
+  // };
+
+  // // this useEffect triggers the following warning in the Messages component (but not here):
+  // // Warning: Internal React error: Expected static flag was missing.
+  // useEffect(() => {
+  //   scrollToTop();
+  // }, [conversationId]);
+
   return (
     <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
       <div className="flex flex-col gap-2 text-sm text-gray-100">
+        {/* <div ref={currentRef} /> */}
         {conversations &&
           conversations.map((convo, i) => (
             <Conversation
@@ -12,6 +27,7 @@ export default function Conversations({ conversations }) {
               id={convo.conversationId}
               parentMessageId={convo.parentMessageId}
               title={convo.title}
+              conversationId={conversationId}
             />
           ))}
         {conversations && conversations.length >= 12 && (