feat: thread top down button

Opla · Feb 14, 2024 · 5ed28d3 · 5ed28d3
2 parents 2400489 + f38ae46
commit 5ed28d3
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 138 deletions.
diff --git a/webapp/components/threads/Conversation.tsx b/webapp/components/threads/Conversation.tsx
@@ -12,11 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useEffect, useRef } from 'react';
+import { ArrowDown } from 'lucide-react';
 import useScroll, { KeyedScrollPosition } from '@/hooks/useScroll';
 import { Message } from '@/types';
 import logger from '@/utils/logger';
 import MessageView from './Message';
+import { Button } from '../ui/button';
 
 type ConversationProps = {
   conversationId: string;
@@ -37,29 +38,13 @@ function Conversation({
   handleShouldDeleteMessage,
   handleChangeMessageContent,
 }: ConversationProps) {
-  const bottomOfChatRef = useRef<HTMLDivElement>(null);
-  // const [updatedScrollPosition, setUpdatedScrollPosition] = useState(scrollPosition);
-
   const handleUpdatePosition = (props: KeyedScrollPosition) => {
-    // if (position.y === newPosition.y) return;
     logger.info('updated newPosition', props);
-    // onScrollPosition(newPosition.y);
     onScrollPosition(props);
   };
 
-  // const ref = useRef<HTMLDivElement | undefined>(undefined);
-  const [ref, scrollTo] = useScroll(
-    conversationId,
-    { x: scrollPosition === -1 ? -1 : 0, y: scrollPosition },
-    handleUpdatePosition,
-  );
-  // logger.info(`render Conversation ${messages.length}`, scrollPosition, ref);
-
-  useEffect(() => {
-    scrollTo({ x: 0, y: scrollPosition });
-  }, [scrollPosition, scrollTo]);
-
-  // useDebounceFunc<number>(onScrollPosition, updatedScrollPosition, 500);
+  const position = { x: scrollPosition === -1 ? -1 : 0, y: scrollPosition };
+  const [ref, scrollTo] = useScroll(conversationId, position, handleUpdatePosition);
 
   return (
     <div className="flex grow flex-col overflow-hidden">
@@ -83,8 +68,18 @@ function Conversation({
         </div>
       </div>
 
-      <div className="h-4 w-full" />
-      <div ref={bottomOfChatRef} />
+      <div className="z-100 relative w-full">
+        {scrollPosition < 99 && scrollPosition > 0 && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute bottom-4 right-8"
+            onClick={() => scrollTo({ x: 0, y: 100 })}
+          >
+            <ArrowDown />
+          </Button>
+        )}
+      </div>
     </div>
   );
 }

diff --git a/webapp/components/threads/Thread.tsx b/webapp/components/threads/Thread.tsx
@@ -457,11 +457,6 @@ function Thread({
     handleUpdatePrompt(prompt.value, prompt.name);
   };
 
-  /* const [updatedScrollPosition, setUpdatedScrollPosition] = useState<KeyedScrollPosition>({
-    key: undefined,
-    position: EmptyPosition,
-  }); */
-
   const handleScrollPosition = ({ key, position }: KeyedScrollPosition) => {
     const conversation = getConversation(key, conversations);
     if (conversation && conversation.scrollPosition !== position.y && position.y !== -1) {
@@ -472,8 +467,6 @@ function Thread({
     }
   };
 
-  // useDebounceFunc<KeyedScrollPosition>(handleScrollPosition, updatedScrollPosition, 500);
-
   logger.info(
     `render Thread ${conversationId}`,
     selectedConversation,
@@ -535,12 +528,15 @@ function Thread({
           <PromptsGrid onPromptSelected={handlePromptSelected} />
         </div>
       ) : (
-        messages &&
-        messages[0]?.conversationId === conversationId && (
+        (message || (messages && messages[0]?.conversationId === conversationId)) && (
           <ConversationView
             conversationId={selectedConversation?.id as string}
-            scrollPosition={selectedConversation?.scrollPosition || -1}
-            messages={messages}
+            scrollPosition={
+              selectedConversation && selectedConversation.scrollPosition !== undefined
+                ? selectedConversation.scrollPosition
+                : -1
+            }
+            messages={messages || []}
             onScrollPosition={handleScrollPosition}
             handleResendMessage={handleResendMessage}
             handleShouldDeleteMessage={handleShouldDeleteMessage}
@@ -550,7 +546,7 @@ function Thread({
       )}
       <div className="flex flex-col items-center text-sm dark:bg-neutral-800/30" />
 
-      {messages && messages[0]?.conversationId === conversationId && (
+      {(message || (messages && messages[0]?.conversationId === conversationId)) && (
         <PromptArea
           conversationId={conversationId as string}
           message={message}