AW-496-connect-chats

edits

src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.module.scss

@@ -10,3 +10,9 @@
   justify-content: center;
   padding-top: 16px;
 }
+
+.suggestions.suggestions {
+  position: sticky;
+  bottom: 0;
+  padding: 0 16px 36px;
+}

src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx

@@ -7,7 +7,7 @@ import { useChat } from "@/providers/chat-provider";
 import { useChatStore } from "@/providers/chat-store-provider";
 import { formatTime } from "@/shared/utils/date";
 
-import { ChatMessages } from "..";
+import { ChatMessages, Suggestions } from "..";
 
 import styles from "./ChatMessagesWrapper.module.scss";
 
@@ -20,9 +20,10 @@ export default function ChatMessagesWrapper() {
     messagesWrapperRef,
     loadOlder,
     scrollToBottom,
+    send,
   } = useChat();
 
-  const { suggestionsHeight, _hasHydrated } = useChatStore(state => state);
+  const { _hasHydrated } = useChatStore(state => state);
 
   const isInitialScrollDone = useRef(false);
 
@@ -48,47 +49,19 @@ export default function ChatMessagesWrapper() {
   }, [socketMessages]);
 
   useEffect(() => {
-    if (
+    if (socketMessages.length > 0 && _hasHydrated) {
-      socketMessages.length > 0 &&
-      !isInitialScrollDone.current &&
-      _hasHydrated
-    ) {
-      scrollToBottom();
       const timeout = setTimeout(() => {
-        isInitialScrollDone.current = true;
+        scrollToBottom();
-      }, 1000);
+      });
       return () => clearTimeout(timeout);
     }
   }, [socketMessages.length, scrollToBottom, _hasHydrated]);
 
-  // useEffect(() => {
-  //   if (suggestionsHeight) {
-  //     const timeout = setTimeout(() => {
-  //       scrollToBottom();
-  //       console.log("scrollToBottom 2");
-  //     }, 0);
-  //     return () => clearTimeout(timeout);
-  //   }
-  // }, [suggestionsHeight, scrollToBottom]);
-
-  useEffect(() => {
-    if (messagesWrapperRef.current?.style.paddingBottom) {
-      scrollToBottom();
-    }
-  }, [
-    scrollToBottom,
-    messagesWrapperRef.current?.style.paddingBottom,
-    messagesWrapperRef,
-  ]);
-
   return (
     <div
       className={styles.messagesWrapper}
       ref={messagesWrapperRef}
       onScroll={handleScroll}
-      style={{
-        paddingBottom: suggestionsHeight,
-      }}
     >
       {isLoadingOlder && hasMoreOlderMessages && (
         <div className={styles.loaderTop}>
@@ -99,6 +72,12 @@ export default function ChatMessagesWrapper() {
         messages={mappedMessages}
         isLoadingAdvisorMessage={isLoadingAdvisorMessage}
       />
+      <Suggestions
+        className={styles.suggestions}
+        onSuggestionClick={suggestion => {
+          send(suggestion);
+        }}
+      />
     </div>
   );
 }

src/components/domains/chat/MessageInputWrapper/MessageInputWrapper.tsx

@@ -2,7 +2,7 @@
 
 import { useChat } from "@/providers/chat-provider";
 
-import { MessageInput, Suggestions } from "..";
+import { MessageInput } from "..";
 
 import styles from "./MessageInputWrapper.module.scss";
 
@@ -11,11 +11,6 @@ export default function MessageInputWrapper() {
 
   return (
     <div className={styles.container}>
-      <Suggestions
-        onSuggestionClick={suggestion => {
-          send(suggestion);
-        }}
-      />
       <div className={styles.inputWrapper}>
         <MessageInput onSend={send} />
       </div>

src/components/domains/chat/Suggestions/Suggestions.module.scss

@@ -1,6 +1,4 @@
 .container {
-  position: absolute;
-  bottom: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;

src/components/domains/chat/Suggestions/Suggestions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
+import clsx from "clsx";
 
 import { Typography } from "@/components/ui";
 import { useChatStore } from "@/providers/chat-store-provider";
@@ -8,21 +9,21 @@ import { useChatStore } from "@/providers/chat-store-provider";
 import styles from "./Suggestions.module.scss";
 
 interface SuggestionsProps {
+  className?: string;
   onSuggestionClick: (suggestion: string) => void;
 }
 
-export default function Suggestions({ onSuggestionClick }: SuggestionsProps) {
+export default function Suggestions({
-  const { suggestions, setSuggestionsHeight } = useChatStore(state => state);
+  className,
+  onSuggestionClick,
+}: SuggestionsProps) {
+  const { suggestions } = useChatStore(state => state);
   const suggestionsRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    setSuggestionsHeight(suggestionsRef.current?.clientHeight ?? 0);
-  }, [setSuggestionsHeight, suggestions]);
-
   return (
     <>
       {!!suggestions?.length && (
-        <div className={styles.container} ref={suggestionsRef}>
+        <div className={clsx(styles.container, className)} ref={suggestionsRef}>
           {suggestions?.map((suggestion, index) => (
             <div
               key={`suggestion-${index}`}
@@ -35,6 +36,7 @@ export default function Suggestions({ onSuggestionClick }: SuggestionsProps) {
                 as="p"
                 weight="medium"
                 className={styles.suggestionText}
+                align="left"
               >
                 {suggestion}
               </Typography>

src/hooks/chats/useChatSocket.ts

@@ -63,8 +63,6 @@ export const useChatSocket = (
   const [isSessionExpired, setIsSessionExpired] = useState(false);
   const [refillModals, setRefillModals] = useState<IRefillModals | null>(null);
   const { suggestions, setSuggestions } = useChatStore(state => state);
-  const [isSuggestionsInitialized, setIsSuggestionsInitialized] =
-    useState(false);
 
   const isLoadingAdvisorMessage = useMemo(() => {
     return messages.length > 0 && messages[0].role !== "assistant";
@@ -166,8 +164,6 @@ export const useChatSocket = (
     if (data[0].role === "user") setIsLoadingSelfMessage(false);
     // if (data[0].role === "assistant") setIsLoadingAdvisorMessage(false);
 
-    setSuggestions(data[0].suggestions);
-
     setMessages(prev => {
       const map = new Map<string, UIMessage>();
 
@@ -182,6 +178,7 @@ export const useChatSocket = (
           text: d.text,
           createdDate: d.createdDate,
           isRead: d.isRead,
+          suggestions: d.suggestions,
         })
       );
       return Array.from(map.values()).sort(
@@ -230,14 +227,8 @@ export const useChatSocket = (
   }, [socket, status, joinChat, leaveChat, fetchBalance]);
 
   useEffect(() => {
-    if (!isSuggestionsInitialized) {
+    setSuggestions(messages[0]?.suggestions);
-      setSuggestions([]);
+  }, [messages, setSuggestions]);
-    }
-    if (messages[0]?.suggestions && !isSuggestionsInitialized) {
-      setSuggestions(messages[0].suggestions);
-      setIsSuggestionsInitialized(true);
-    }
-  }, [messages, setSuggestions, isSuggestionsInitialized]);
 
   useEffect(() => {
     if (session && status === ESocketStatus.CONNECTED) {

src/providers/chat-provider.tsx

@@ -42,7 +42,6 @@ export function ChatProvider({
   const value = useChatSocket(chatId, {
     initialMessages,
     initialTotal,
-    onNewMessage: _message => scrollToBottom(),
   });
 
   const messagesWrapperRef = useRef<HTMLDivElement>(null);

src/stores/chat-store.ts

@@ -9,7 +9,6 @@ interface ChatState {
   currentChat: IChat | null;
   isAutoTopUp: boolean;
   suggestions: IChatMessage["suggestions"];
-  suggestionsHeight: number;
   _hasHydrated: boolean;
 }
 
@@ -17,7 +16,6 @@ export type ChatActions = {
   setCurrentChat: (chat: IChat) => void;
   setIsAutoTopUp: (isAutoTopUp: boolean) => void;
   setSuggestions: (suggestions: IChatMessage["suggestions"]) => void;
-  setSuggestionsHeight: (height: number) => void;
   clearChatData: () => void;
   setHasHydrated: (hasHydrated: boolean) => void;
 };
@@ -28,7 +26,6 @@ const initialState: ChatState = {
   currentChat: null,
   isAutoTopUp: false,
   suggestions: [],
-  suggestionsHeight: 0,
   _hasHydrated: false,
 };
 
@@ -41,8 +38,6 @@ export const createChatStore = (initState: ChatState = initialState) => {
         setIsAutoTopUp: (isAutoTopUp: boolean) => set({ isAutoTopUp }),
         setSuggestions: (suggestions: IChatMessage["suggestions"]) =>
           set({ suggestions }),
-        setSuggestionsHeight: (height: number) =>
-          set({ suggestionsHeight: height }),
         clearChatData: () => set(initialState),
 
         setHasHydrated: (hasHydrated: boolean) =>